如何使用JavaScript将文本复制到剪贴板

​建立网站时，一个非常普遍的需求是能够通过单击一个按钮将文本复制到剪贴板。Javascript可以通过五个短步轻松地做到这一点：无需用户选择它或敲击键盘上的适当组合键。

1. 创建 <textarea>要附加到文档的元素。将其值设置为我们要复制到剪贴板的字符串。
2. <textarea>将该元素追加到当前HTML文档中。
3. 使用HTMLInputElement.select()选择的内容<textarea>元素。
4. 使用Document.execCommand('copy')到的内容复制<textarea>到剪贴板。
5. <textarea>从文档中删除元素。

此方法的最简单版本如下所示：

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

请记住，此方法将无法在所有地方使用，而只能是由于用户的操作方式（例如，在click事件侦听器内部）而导致，因为这种方式Document.execCommand()有效。

隐藏附加元素

上面的方法虽然可以使用，但可能存在一些问题，例如在添加和删除时会闪烁，而<textarea>在考虑可访问性时，这一问题更加明显。此方法的主要改进来自添加一些CSS，以使元素不可见并限制了用户的编辑：

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

保存并恢复原始文档的选择

总结之前的最后考虑是尊重用户以前与网站的交互，例如已经选择了一些内容。幸运的是，我们现在可以使用一些现代的Javascript方法和属性，如DocumentOrShadowRoot.getSelection()，Selection.rangeCount和Selection.getRangeAt()，Selection.removeAllRanges()并Selection.addRange()保存和恢复原始文档选择。

THE END

感谢阅读