兼容chrome的前端剪切板!

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

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

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

另外提示下 下载ZeroClipboard 地址   https://github.com/zeroclipboard/zeroclipboard

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

所以哟 只引入一个ZeroClipboard.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

猜你喜欢

转载自blog.csdn.net/weixin_43099985/article/details/82909432