js实现点击按钮复制文本功能

女爷i 2022-08-28 06:59 285阅读 0赞

最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板

之前做过复制输入框的内容，原以为差不多，结果发现根本行不通

尝试了各种办法，最后使了个障眼法，实现了下面的效果

![96870088b663e0f0b3f34164a6ec55a4.gif][]

**一、原理分析**

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>document.execCommand(</code> 
      <code>"copy"</code> 
      <code>)</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

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

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

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

**二、代码实现**

HTML 部分

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>style</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"text/css"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>.wrapper {position: relative;}</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>style</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"wrapper"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>p</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"text"</code> 
      <code>&gt;我把你当兄弟你却想着复制我？&lt;/</code> 
      <code>p</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>textarea</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"input"</code> 
      <code>&gt;这是幕后黑手&lt;/</code> 
      <code>textarea</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>button</code> 
      <code>onclick</code> 
      <code>=</code> 
      <code>"copyText()"</code> 
      <code>&gt;copy&lt;/</code> 
      <code>button</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

JS 部分

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>function</code> 
      <code>copyText() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>text = document.getElementById(</code> 
      <code>"text"</code> 
      <code>).innerText;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>input = document.getElementById(</code> 
      <code>"input"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>input.value = text; </code> 
      <code>// 修改文本框的内容</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>input.select(); </code> 
      <code>// 选中文本</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>document.execCommand(</code> 
      <code>"copy"</code> 
      <code>); </code> 
      <code>// 执行浏览器复制命令</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>alert(</code> 
      <code>"复制成功"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

[96870088b663e0f0b3f34164a6ec55a4.gif]: /images/20220828/3f25ac4d72f449dca2af90290f0c43da.png