使用纯 Javascript 将字符串复制到剪贴板

为了在浏览器中将字符串复制到系统剪贴板而不使用任何依赖如 clipboard.js，使用此函数：

function copyStringToClipboard (str) {
   // 创建新元素
   var el = document.createElement('textarea');
   // 设置值（要复制的字符串）
   el.value = str;
   // 设置为不可编辑以避免焦点并移出视图
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   // 选择元素内的文本
   el.select();
   // 将文本复制到剪贴板
   document.execCommand('copy');
   // 移除临时元素
   document.body.removeChild(el);
}

注意： 如果用户在运行函数时选择了任何内容，此选择将被清除。如果你需要保留选择，请参见此 Hackernoon 文章了解更详细的解决方案。

你可以这样使用它：

// 用法示例：
copyStringToClipboard("abc123");

浏览器兼容性

此解决方案仅使用基本 Javascript（不需要 ES6 特性），存在数十年的 DOM API 和 document.exec('copy');，根据 Mozilla 开发者网络，它与所有主要浏览器兼容，包括从 IE9 开始的 Internet Explorer。

工作原理

我们创建一个新的 <textarea> 元素，将其值设置为要复制的字符串（例如上面用法示例中的 "abc123"）。

为了避免混淆用户，更重要的是避免混淆屏幕阅读器，我们将其设置为只读并向左移动 -9999px，这在所有实际用途中保证在视口之外。

只有在将元素移出视口后，我们才将其添加到 DOM，这样它甚至不会显示一瞬间。

现在我们可以使用 el.select() 选择元素内的文本，并使用 document.execCommand('copy'); 将其复制到剪贴板。

最后，我们从 DOM 中移除该元素。

感谢 Hackernoon 上的 Angelos Charalis提供将元素移出视口的原始想法。