建立网站时，一个非常普遍的需求是能够通过单击一个按钮将文本复制到剪贴板。Javascript可以通过五个短步轻松地做到这一点：无需用户选择它或敲击键盘上的适当组合键。
- 创建
<textarea>要附加到文档的元素。将其值设置为我们要复制到剪贴板的字符串。 <textarea>将该元素追加到当前HTML文档中。- 使用
HTMLInputElement.select()选择的内容<textarea>元素。 - 使用
Document.execCommand('copy')到的内容复制<textarea>到剪贴板。 <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
感谢阅读