如何使用JavaScript将文本复制到剪贴板？_javascript 剪贴板文本-优快云博客

本文链接：https://blog.youkuaiyun.com/Q183183/article/details/106989968

本文介绍了一种使用JavaScript实现的便捷方法，允许用户通过单击按钮将文本复制到剪贴板，无需手动选择文本或使用键盘快捷键。文章详细解释了实现这一功能的五个步骤，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

建立网站时，一个非常普遍的需求是能够通过单击一个按钮将文本复制到剪贴板。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()保存和恢复原始文档选择。

学习更多前端知识请关注公众号，发送“VUE学习”可以领取vue学习资料哦