将文本复制到剪切板的多种解决方案（2018-08-17）

原生JS实现：

const copyText = (text) => {
  let e = document.createElement('input');
  e.setAttribute('id', 'copyTextBox');
  e.value = text;
  document.getElementsByTagName('body')[0].appendChild(e);
  document.getElementById('copyTextBox').select();
  document.execCommand("copy");
  document.getElementById('copyTextBox').remove();

  let tag = document.getElementById('tag');
  tag.style.display = "block";
  setTimeout(() => {
    tag.style.display = "none";
  }, 3000);
}

为什么非要写入document中呢，因为，如果不写入document中的话create的input标签是不可拓展的。简单来说就是不能给他value的。

     <div>
       <div className="share-overlay" onClick={stopProp}>
          <div className="share-link">
            <p>分享链接</p>
            <p>{url}</p>
            <Button onClick={() => copyText(url)}>复制链接</Button>
            <div className="success-tag" id="tag">复制成功</div>
          </div>
          <div className="qr-code">
            <QRCode value={url} size={100} />
            <span id="qr-code"></span>
            <p>扫描二维码 分享到微信</p>
          </div>
          <div className="clearfix"></div>
        </div>
      </div>