现在不使用ZeroClipboard我们也能实现复制功能（转）
生活随笔
收集整理的这篇文章主要介绍了
现在不使用ZeroClipboard我们也能实现复制功能（转）
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
现在不使用ZeroClipboard我们也能实现
首先，我们保证页面结构不变，但不在引入ZeroClipboard插件：
1 <input type="text" name="" id="J_TextIn" value="Copy Test."> 2 <input type="button" value="Copy" id="J_DoCopy">
然后，我们使用 document.execCommamd来对内容进行复制：
(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 })();
接着，我们在浏览器中浏览，和使用ZeroClipboard时一样的去操作，效果是一样的。但是，这段代码的正确执行是有限制的，因为 document.execCommand 在Chrome中支持的比较晚，所以要求Chrome版本必须是43及以后。
最后，再补充说明一下，使用 document.execCommand 来实现复制内容时，过渡被复制内容的 textarea 标签（即：动态创建的那个textarea标签），在复制可输入区域（input:text,textarea）的内容时并不是必须的，可以直接简化为：
1 (function(){2 var btn = document.getElementById('J_DoCopy'),3 text = document.getElementById('J_TextIn');4 btn.onclick = function(){5 text.focus();6 text.select();7 document.execCommand('Copy', false, null);8 text.blur();9 }; 10 })();
考虑到实际使用中，我们可能需要复制一些非编辑区域提供的内容（比如：一个a标签的链接地址等），所以增加了一个过渡的texearea，似乎更保险，更灵活一些。
此外，我再测试过程中，曾试图将过渡的那个textarea设置为不可见的 visibility:hidden; ，却发现复制功能失效了，所以这里需要注意一下...
转载于:https://www.cnblogs.com/xupeiyu/p/4882349.html
总结
以上是生活随笔为你收集整理的现在不使用ZeroClipboard我们也能实现复制功能（转）的全部内容，希望文章能够帮你解决所遇到的问题。
