這裡只講一個react的實現方式，我們使用react-copy-to-clipboard

首先安裝 react-copy-to-clipboard

npm install –save react react-copy-to-clipboard

或者

cnpm install –save react react-copy-to-clipboard

或者

yarn add react-clipboard

使用 react-copy-to-clipboard

import React from 'react';
import ReactDOM from 'react-dom'
 
;
import {CopyToClipboard} from 'react-copy-to-clipboard';

class App extends React.Component {
  state = {
    value: '',
    copied: false,
  };

  render() {
    return (
      <div>
        <input value={this.state.value}
          onChange={({target: {value}}) => this.setState({value, copied
 
: false})} />

        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <span>Copy to clipboard with span</span>
        </CopyToClipboard>

        <CopyToClipboard text={this.state.value}
          onCopy={() =>
 
 this.setState({copied: true})}>
          <button>Copy to clipboard with button</button>
        </CopyToClipboard>

        {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
      </div>
    );
  }
}

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

注意事項

npm 5以上，和cnpm安裝會有問題。可以嘗試 yarn安裝，或者把 npm降級到 4,安裝完以後，在升級到5。

相容性

除了 opera 和 UC 瀏覽器支援性不好，其他瀏覽器相容性都可以。

參考網址