现在不使用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