js点击复制插件ZeroClipboard
来源:原创
时间:2016-03-14
作者:脚本小站
分类:JS/JQuery
点击复制内容,一般情况下实现很简单,代码网上有,但是要做到兼容还是比较麻烦的 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
