本期详解推荐观看视频版&＃xff1a;
前端Tips#7 - 用 6 行代码实现文本复制mp.weixin.qq.com
【以下是文字版】
本期主要是讲一个 JS 技巧&＃xff0c;用 6 行代码实现文本复制的功能。
代码片段
核心的代码片段就 6 行&＃xff0c;利用动态创建 textarea&＃xff0c;和 document.execCommand 命令就实现了&＃xff1a;
const copyToClipboard &＃61; str &＃61;> {const el &＃61; document.createElement(&＃39;textarea&＃39;);el.value &＃61; str;document.body.appendChild(el);el.select();document.execCommand(&＃39;copy&＃39;);document.body.removeChild(el);
};
替代方案
因为 document.execCommand 命令虽说还能使用&＃xff0c;然而官方建议尽可能少用。官方比较推荐的还是 Navigator.clipboard API&＃xff0c;当然该对象还在草案状态&＃xff0c;IE、Safari 也还不支持&＃xff0c;所以兼容性需要考虑。
使用 Clipboard_API 就很方便实现 复制、粘贴 功能&＃xff1a;
const copyToClipboard &＃61; async str &＃61;> {...// 写入粘贴板await navigator.clipboard.writeText(str)...// 读取粘贴板await navigator.clipboard.readText()
};
注意事项
- 因为浏览器安全限制&＃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
京公网安备 11010802041100号