JS实现一键复制的功能

参考WEB API接口
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

实现

document.execCommand(‘copy’)

语法

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

参数

aCommandName: 命令名字,copy,cut等
aShowDefaultUI:一个 Boolean， 是否展示用户界面，一般为 false。
aValueArgument:一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url），默认为null,一般不用。

要想copy内容，只能对可编辑区域（input，textarea）进行操作，所以实现需分为复制input内容与复制非input内容。

• 复制input内容：代码以react+antd demo为例

// antd的input组件，class为ant-input
<Input style={{maxWidth: '270px', marginRight: '10px'}} onChange={(e)=>this.changeInput(e)} value={this.state.inputValue} />
<Button type="primary" onClick={()=>this.fzValue()}>点击一键复制内容</Button>

  fzValue() {
    console.log('点击了一键复制内容按钮')
    if (document.execCommand('copy')) {
      const input = document.getElementsByClassName('ant-input')
      input[0].select()
      document.execCommand('copy')
      alert('复制成功')
    }
  }

• 复制非input内容，需创建input框，value为要复制的内容

<div className={'hello-div'}>Hello</div>
<Button type="primary" onClick={()=>this.fzValue()}>增加</Button>

  fzValue() {
    if (document.execCommand('copy')) {
      // 获取要复制的内容
      const value = document.getElementsByClassName('hello-div')[0].innerHTML
      // 创建input
      const input = document.createElement('input')
      // 将input的value设置为要复制的内容
      input.setAttribute('value', value);
      document.body.appendChild(input);
      input.select()
      document.execCommand('copy')
      // 销毁input
      input.remove()
    }
  }