在网上搜了搜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; ,却发现复制功能失效了,所以这里需要注意一下...