「译」利用 JavaScript 复制文本到剪贴板

• 原文地址：Copying text to clipboard with JavaScript
• 原文做者：Angelos Chalaris

本文将会深刻介绍 30 秒代码 中 copyToClipboard 代码块的工做原理。你能够在项目仓库中找到它的源代码以及更多其余的实用方法。

30 秒代码：能够在 30 秒或更短期内理解的 JavaScript 代码块

核心功能

搭建网站时常常会遇到一个需求，那就是在用户没有选中或者使用键盘组合键的状况下，复制文本到剪贴板。JavaScript 能够用短短五步轻松解决这个问题：

1.建立一个稍后将插入到文档中的 <textarea> 元素。将咱们想要复制到剪贴板的字符串设置为它的 value 。 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);
};
复制代码

copyToClipboard 方法的基本实现

记住，这个方法不是在任何状况下均可以使用的。由于 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);
};
复制代码

隐藏文本域的 copyToClipboard 实现

保存和恢复原先的文档选中

最后须要考虑的问题是，用户可能已经在 HTML 文档中选中了一些内容，明智之举是不移除他们选中的这些内容。幸运的是，咱们可使用诸如 DocumentOrShadowRoot.getSelection(),Selection.rangeCount, Selection.getRangeAt(), Selection.removeAllRanges() 和 Selection.addRange() 等现成的 JavaScript 方法和属性来保存和恢复原先的文档选中。这是最终的带注释的改良代码：

const copyToClipboard = str => {
  const el = document.createElement('textarea');  // 建立一个 <textarea> 元素
  el.value = str;                                 // 设置它的值为你想复制的字符串
  el.setAttribute('readonly', '');                // 设置为只读以防止干扰
  el.style.position = 'absolute';                 
  el.style.left = '-9999px';                      // 移出屏幕外以使其不可见
  document.body.appendChild(el);                  // 插入 <textarea> 元素到 HTML 文档中
  const selected =            
    document.getSelection().rangeCount > 0        // 检查是否以前曾选中过内容
      ? document.getSelection().getRangeAt(0)     // 若是找到，则保存选中
      : false;                                    // 标记为 false 以表示不存在以前选中的内容
  el.select();                                    // 选中 <textarea> 的内容
  document.execCommand('copy');                   // 复制 - 仅看成为用户操做的响应结果时才能够工做(好比，点击事件)
  document.body.removeChild(el);                  // 移除 <textarea> 元素
  if (selected) {                                 // 若是在复制前已存在选中的内容
    document.getSelection().removeAllRanges();    // 取消 HTML 文档中全部的选中部分
    document.getSelection().addRange(selected);   // 恢复原来的选中
  }
};
复制代码

最终形式的 copyToClipboard，能够保存选中

这就是所有的内容。仅用了不到 20 行代码，咱们已经建立了前端开发中最经常使用的方法之一。

若是喜欢这篇文章，给一个 clap（或者 fifty）。记得查看 30 秒代码 ，为你的 JavaScript 项目找到更多实用的代码块！