兼容chrome的前端剪切板!

在网上搜了搜IE用window.clipboardData API那其他浏览器怎么实现呢?

一大堆说用插件 我下载了这个插件按流程来竟然没成功!在各种浏览器都失败!

后来才知道这玩意要放到服务器环境中使用,不能在本地测试(欲哭无泪。。。。)

另外提示下 下载 地址

下载的时候有个dist文件 里面的.js .swf都要用到 因为它的原理是通过flash做中间桥梁实现复制!

所以哟 只引入一个.js是不行的!

ZeroClipboard使用案例

1 <input type="text" name="" id="J_TextIn" value="Copy Test.">
2 <input type="button" value="Copy" id="J_DoCopy">
3 <script src="dist/ZeroClipboard.min.js"></script>
1 (function(){
2     var btn = document.getElementById(J_DoCopy),
3         text = document.getElementById(J_TextIn),
4         zc = new ZeroClipboard(btn);
5     zc.on(beforecopy, function(e){
6         zc.setText(text.value);
7     });
8 })();

现在不使用ZeroClipboard我们也能实现 简单易用 非常成功!

1 <input type="text" name="" id="J_TextIn" value="Copy Test.">
2 <input type="button" value="Copy" id="J_DoCopy">
1 (function(){
 2     var btn = document.getElementById(J_DoCopy),
 3         text = document.getElementById(J_TextIn);
 4     btn.onclick = function(){
 5         var transfer = document.getElementById(J_CopyTransfer);
 6         if (!transfer) {
 7             transfer = document.createElement(textarea);
 8             transfer.id = J_CopyTransfer;
 9             transfer.style.position = absolute;
10             transfer.style.left = -9999px;
11             transfer.style.top = -9999px;
12             document.body.appendChild(transfer);
13         }
14         transfer.value = text.value;
15         transfer.focus();
16         transfer.select();
17         document.execCommand(Copy, false, null);
18     };
19 })();

我再测试过程中,曾试图将过渡的那个textarea设置为不可见的 visibility:hidden; ,却发现复制功能失效了,所以这里需要注意一下...

另外还有一个更好用的clipboard.js 给大家一个地址 自己去学习吧

http://www.webkaka.com/Blog/ARCHIVES/demo/clipboard.js-master/demo/index.html

经验分享 程序员 微信小程序 职场和发展