乐趣区

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

jiezi

​建立网站时，一个非常普遍的需求是能够通过单击一个按钮将文本复制到剪贴板。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

感谢阅读

退出移动版