点击复制内容,一般情况下实现很简单,代码网上有,但是要做到兼容还是比较麻烦的 ZeroClipboard 这个插件挺好用。

        下载地址:https://github.com/zeroclipboard/ZeroClipboard/

        下载之后找出 ZeroClipboard.min.js 和 ZeroClipboard.swf 两个文件,将这两个文件放一个文件夹,其他不用。

方法一:

<html>
  <body>
    <button id="copy-button" data-clipboard-text="复制后粘贴" title="Click to copy me.">Copy to Clipboard</button>
    <script src="./js/ZeroClipboard.min.js"></script>
	<!-- ZeroClipboard.min.js 和 ZeroClipboard.swf 必须在同一文件夹-->
<script>
var client = new ZeroClipboard( document.getElementById("copy-button") );
</script>
  </body>
</html>

方法二:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-CN" />
<body>
<div id="fe_text" >Copy me!</div>

<button id="copy-button" data-clipboard-target="fe_text" data-clipboard-text="默认内容" title="Click to copy me.">点击复制</button>

<script src="./js/ZeroClipboard.min.js"></script>
<!--
ZeroClipboard.min.js 和 ZeroClipboard.swf 必须在同一文件夹

data-clipboard-target="fe_text" 就是要复制id为fe_text的元素的内容
data-clipboard-text="默认内容" 当没有设置data-clipboard-target时默认复制这个值
-->
<script>
var client = new ZeroClipboard( document.getElementById("copy-button") );

client.on( "ready", function( readyEvent ){
client.on( "aftercopy", function( event ){
//隐藏刚才点击的按钮
//event.target.style.display = "none";
alert("Copied text to clipboard: " + event.data["text/plain"] );
});
});
</script>
</body>
</html>

下面有详细介绍,总结的很好:

http://www.365mini.com/page/zeroclipboard-2_x-quick-start.htm