前端Tips#7 - 用 6 行代码实现文本复制

本期主要是讲一个 JS 技巧，用 6 行代码实现文本复制的功能。

视频讲解

https://v.qq.com/x/page/t09429int8j.html

音频讲解

文字讲解

代码片段

核心的代码片段就 6 行，利用动态创建 textarea，和 document.execCommand 命令就实现了：

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

替代方案

因为 document.execCommand 命令虽说还能使用，然而官方建议尽可能少用。官方比较推荐的还是 Navigator.clipboard API，当然该对象还在草案状态，IE、Safari 也还不支持，所以兼容性需要考虑。

使用 Clipboard_API 就很方便实现 复制、粘贴 功能：

const copyToClipboard = async str => {
    ...
    // 写入粘贴板
    await navigator.clipboard.writeText(str)
    ...
    // 读取粘贴板
    await navigator.clipboard.readText()
};

注意事项

• 因为浏览器安全限制，文本复制 功能必须由用户主动触发（比如放在点击事件里），而不能一进页面就自动触发
• 建议这个代码片段只是用于 能力增强 部分，就算牺牲掉该功能也没多大关系。
• 如果非要用于主功能里，建议使用成熟的 clipboard.js 开源库

参考文档

• Copying text to clipboard with JavaScript：30 seconds of code
• How to copy to the clipboard using JavaScript：使用 Clipboard_API