js实现复制功能

js实现复制功能 一、具体场景二、实现方式1. document.execCommand（1）具体实现（2）方法特点 2.navigator.clipboard.writeText（1）具体实现（2）方法特点 3.其他插件

一、具体场景

前端有时需要实现点击按钮复制的功能，这个时候就不能让用户去手动选择内容右键复制了。

二、实现方式 1. document.execCommand （1）具体实现

复制时，先选中文本，然后调用document.execCommand(‘copy’)，选中的文本就会进入剪贴板。这就需要借助输入框来实现对文本的选中。
具体案例：

  <button type="button" onclick="theCopy()">复制button>
  <label style="display: block">
    <textarea id="textArea">哈哈哈哈哈哈哈哈哈111111textarea>
  label>

  function theCopy() {
    let textArea = document.getElementById('textArea')
    console.log(textArea);
    textArea.select()
    document.execCommand('copy')
  }

如果内容不在输入框中，我们可以借助一个透明的输入框来实现

  <button type="button" onclick="theCopy()">复制button>
  <p id="text">哈哈哈哈哈哈哈哈哈111111p>
  <label style="display: block">
    <textarea id="textArea" style="opacity: 0;">textarea>
  label>

  function theCopy() {
    let textArea = document.getElementById('textArea')
    let text = document.getElementById('text')
    textArea.innerText = text.innerHTML
    console.log(textArea);
    textArea.select()
    document.execCommand('copy')
  }

（2）方法特点

execCommand向下兼容性很好

如果你需要兼容IE推荐你使用此方法
但是此方法已经不被官方推荐使用了

所以如果不需要兼容IE，推荐使用下面的方法

2.navigator.clipboard.writeText （1）具体实现

此方法是专门为剪切板提供的API，使用起来较为简单

writeText(data: string): Promise<void>;

它是一个promise函数，所以可以使用成功或失败的回调（复制成功或失败给提示）
代码实现：

<button onclick="copy()">复制button>

  function copy() {
    navigator && navigator.clipboard && navigator.clipboard.writeText('11111').then(res => {
      console.log(res);
    }).catch(err=> {

    })
  }

（2）方法特点

注：因为安全方面的问题，navigator.clipboard API仅仅支持在locallhost和支持https协议的网站使用，如果你的项目部署的线上网址不是https协议的，请务必做好兼容问题
writeText是一个’比较新’的API，兼容性不是那么好（不兼容IE）

但是他是官方推荐的API，如果不用兼容，推荐大家使用此API

3.其他插件

如果是vue的话可以使用也可以使用 vue-clipboards 完成复制等 *** 作，或者也可以直接使用clipboard.js，具体实现方式各位可以自行去了解。