本期详解推荐观看视频版:
前端Tips#7 - 用 6 行代码实现文本复制mp.weixin.qq.com![1f94ea86a6bd1ec20ed8bda6821a82ea.png](https://i-blog.csdnimg.cn/blog_migrate/da36cc2ff2e99af941f128e1d0342436.png)
【以下是文字版】
本期主要是讲一个 JS 技巧,用 6 行代码实现文本复制的功能。
代码片段
核心的代码片段就 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
- 视频版copy to the clipboard using JavaScript:使用 Clipboard_API