js复制文字到粘贴板_前端Tips#7用6行代码实现文本复制

本期详解推荐观看视频版&＃xff1a;

【以下是文字版】

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

代码片段

核心的代码片段就 6 行&＃xff0c;利用动态创建 textarea&＃xff0c;和 document.execCommand 命令就实现了&＃xff1a;

替代方案

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

使用 Clipboard_API 就很方便实现 复制、粘贴 功能&＃xff1a;

注意事项

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

参考文档

• Copying text to clipboard with Javascript&＃xff1a;30 seconds of code
• 视频版copy to the clipboard using Javascript&＃xff1a;使用 Clipboard_API