原生 js 实现点击按钮复制文本

admin

一、原理分析

浏览器提供了 copy 命令 ，可以复制选中的内容

document.execCommand("copy")

如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用  copy 命令，将文本复制到剪切板

但是 select() 方法只对 <input> 和 <textarea> 有效，对于 <p> 就不好使

最后我的解决方案是，在页面中添加一个 <textarea>，然后把它隐藏掉

点击按钮的时候，先把 <textarea> 的 value 改为 <p> 的 innerText，然后复制 <textarea> 中的内容

二、代码实现

HTML 部分

[url=][/url]
<style type="text/css">   .wrapper {position: relative;}   #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}</style><div class="wrapper">   <p id="text">我把你当兄弟你却想着复制我？</p>   <textarea id="input">这是幕后黑手</textarea>   <button>copy</button></div>[url=][/url]

JS 部分

[url=][/url]
  <script type="text/javascript">    function copyText() {      var text = document.getElementById("text").innerText;      var input = document.getElementById("input");      input.value = text; // 修改文本框的内容      input.select(); // 选中文本      document.execCommand("copy"); // 执行浏览器复制命令      alert("复制成功");    }  </script>[url=][/url]

亲测，Firefox 48.0，Chrome 60.0，IE 8 都能用

三、一键复制

分享一个自己工作中用到的一键复制方法

[url=][/url]
/** * 一键粘贴 * @param  {String} id [需要粘贴的内容] * @param  {String} attr [需要 copy 的属性，默认是 innerText，主要用途例如赋值 a 标签上的 href 链接] * * range + selection * * 1.创建一个 range * 2.把内容放入 range * 3.把 range 放入 selection * * 注意：参数 attr 不能是自定义属性 * 注意：对于 user-select: none 的元素无效 * 注意：当 id 为 false 且 attr 不会空，会直接复制 attr 的内容 */copy (id, attr) {    let target = null;    if (attr) {        target = document.createElement('div');        target.id = 'tempTarget';        target.style.opacity = '0';        if (id) {            let curNode = document.querySelector('#' + id);            target.innerText = curNode[attr];        } else {            target.innerText = attr;        }        document.body.appendChild(target);    } else {        target = document.querySelector('#' + id);    }    try {        let range = document.createRange();        range.selectNode(target);        window.getSelection().removeAllRanges();        window.getSelection().addRange(range);        document.execCommand('copy');        window.getSelection().removeAllRanges();        console.log('复制成功')    } catch (e) {        console.log('复制失败')    }    if (attr) {        // remove temp target        target.parentElement.removeChild(target);    }}[url=][/url]

1. 一、原理分析
   
2. 
   
3. 浏览器提供了 copy 命令 ，可以复制选中的内容
   
4. 
   
5. document.execCommand("copy")
   
6. 如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用  copy 命令，将文本复制到剪切板
   
7. 
   
8. 但是 select() 方法只对 <input> 和 <textarea> 有效，对于 <p> 就不好使
   
9. 
   
10. 
    
11. 
    
12. 最后我的解决方案是，在页面中添加一个 <textarea>，然后把它隐藏掉
    
13. 
    
14. 点击按钮的时候，先把 <textarea> 的 value 改为 <p> 的 innerText，然后复制 <textarea> 中的内容
    
15. 
    
16. 
    
17. 
    
18. 二、代码实现
    
19. 
    
20. HTML 部分
    
21. 
    
22. 复制代码
    
23. <style type="text/css">
    
24.    .wrapper {position: relative;}
    
25.    #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
    
26. </style>
    
27. 
    
28. <div class="wrapper">
    
29.    <p id="text">我把你当兄弟你却想着复制我？</p>
    
30.    <textarea id="input">这是幕后黑手</textarea>
    
31.    <button onclick="copyText()">copy</button>
    
32. </div>
    
33. 复制代码
    
34. 
    
35. 
    
36. JS 部分
    
37. 
    
38. 复制代码
    
39.   <script type="text/javascript">
    
40.     function copyText() {
    
41.       var text = document.getElementById("text").innerText;
    
42.       var input = document.getElementById("input");
    
43.       input.value = text; // 修改文本框的内容
    
44.       input.select(); // 选中文本
    
45.       document.execCommand("copy"); // 执行浏览器复制命令
    
46.       alert("复制成功");
    
47.     }
    
48.   </script>
    
49. 复制代码
    
50. 
    
51. 
    
52. 亲测，Firefox 48.0，Chrome 60.0，IE 8 都能用
    
53. 
    
54. 
    
55. 
    
56. 三、一键复制
    
57. 
    
58. 分享一个自己工作中用到的一键复制方法
    
59. 
    
60. 复制代码
    
61. /**
    
62. * 一键粘贴
    
63. * @param  {String} id [需要粘贴的内容]
    
64. * @param  {String} attr [需要 copy 的属性，默认是 innerText，主要用途例如赋值 a 标签上的 href 链接]
    
65. *
    
66. * range + selection
    
67. *
    
68. * 1.创建一个 range
    
69. * 2.把内容放入 range
    
70. * 3.把 range 放入 selection
    
71. *
    
72. * 注意：参数 attr 不能是自定义属性
    
73. * 注意：对于 user-select: none 的元素无效
    
74. * 注意：当 id 为 false 且 attr 不会空，会直接复制 attr 的内容
    
75. */
    
76. copy (id, attr) {
    
77.     let target = null;
    
78. 
    
79.     if (attr) {
    
80.         target = document.createElement('div');
    
81.         target.id = 'tempTarget';
    
82.         target.style.opacity = '0';
    
83.         if (id) {
    
84.             let curNode = document.querySelector('#' + id);
    
85.             target.innerText = curNode[attr];
    
86.         } else {
    
87.             target.innerText = attr;
    
88.         }
    
89.         document.body.appendChild(target);
    
90.     } else {
    
91.         target = document.querySelector('#' + id);
    
92.     }
    
93. 
    
94.     try {
    
95.         let range = document.createRange();
    
96.         range.selectNode(target);
    
97.         window.getSelection().removeAllRanges();
    
98.         window.getSelection().addRange(range);
    
99.         document.execCommand('copy');
    
100.         window.getSelection().removeAllRanges();
     
101.         console.log('复制成功')
     
102.     } catch (e) {
     
103.         console.log('复制失败')
     
104.     }
     
105. 
     
106.     if (attr) {
     
107.         // remove temp target
     
108.         target.parentElement.removeChild(target);
     
109.     }
     
110. }
     
111. 复制代码
     

复制代码