JS realizes the function of one click Copy

Reference resources WEB API Interface
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

Realization

document.execCommand(‘copy’)

grammar

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

Parameters

aCommandName:  Command name ,copy,cut etc. 
aShowDefaultUI: One  Boolean,  Whether to display the user interface , It's usually  false.
aValueArgument: Some orders （ for example insertImage） Additional parameters are required （insertImage Need to provide insert image Of url）, The default is null, Generally do not use .

If you want to copy Content , Only editable areas （input,textarea） To operate , Therefore, the implementation needs to be divided into replication input Content and replication are not input Content .

• Copy input Content ： Code to react+antd demo For example

// antd Of input Components ,class by ant-input
<Input style={
   {maxWidth: '270px', marginRight: '10px'}} onChange={(e)=>this.changeInput(e)} value={this.state.inputValue} />
<Button type="primary" onClick={()=>this.fzValue()}> Click one button to copy the content </Button>

  fzValue() {
    console.log(' Click the one click Copy content button ')
    if (document.execCommand('copy')) {
      const input = document.getElementsByClassName('ant-input')
      input[0].select()
      document.execCommand('copy')
      alert(' Replication success ')
    }
  }

• Copy non input Content , Need to create input box ,value For what you want to copy

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

  fzValue() {
    if (document.execCommand('copy')) {
      //  Get content to copy 
      const value = document.getElementsByClassName('hello-div')[0].innerHTML
      //  establish input
      const input = document.createElement('input')
      //  take input Of value Set to the content to be copied 
      input.setAttribute('value', value);
      document.body.appendChild(input);
      input.select()
      document.execCommand('copy')
      //  The destruction input
      input.remove()
    }
  }