js一键复制功能及一些坑

      const oInput = document.createElement('input');
      oInput.value = content;
      oInput.readOnly = 'readOnly';
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand('Copy');
      document.body.removeChild(oInput);
      oInput.blur();

复制操作最好放在事件监听函数里面，由用户触发（比如用户点击按钮）。如果脚本自主执行，某些浏览器可能会报错，当如果使用 document.execCommand('Copy')返回是false的话，可能就是因为复制操作在回调函数中，此时，如果需要进行一些请求后在进行复制操作的
话，就需要 ------navigator.clipboard----------

navigator.clipboard

在 Chrome 的 DevTools 控制台下执行 navigator.clipboard 返回 undefined，是因为浏览器禁用了非安全域的 navigator.clipboard 对象，
只有安全域包括本地访问与开启TLS安全认证的地址，如 https 协议的地址、127.0.0.1 或 localhost ，才可以使用 。

整合一下

  // 当document.execCommand 不能使用时切换成clipboard
  copyToClipboard = (content, message) => {
    // navigator clipboard 需要https等安全上下文
    if (navigator.clipboard && window.isSecureContext) {
        // navigator clipboard 向剪贴板写文本
        navigator.clipboard.writeText(content).then((_) => {
          alert(message);
        });
    } else {
      const oInput = document.createElement('textarea');
      oInput.value = content;
      oInput.readOnly = 'readOnly';
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      // console.log(document.execCommand('copy'), 'execCommand');
      if (document.execCommand('copy')) {
        document.execCommand('copy');
      }
      oInput.blur();
      document.body.removeChild(oInput);
      alert(message);
    }
}