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