HTML5复制粘贴代码兼容写法与实现方法
时间：2025-12-07 20:44:00 286浏览 收藏
目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《HTML5复制粘贴代码的兼容写法及执行命令实现方法》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~
优先使用现代Clipboard API并降级至document.execCommand以实现跨浏览器兼容；需在安全上下文中由用户触发操作，避免自动复制，注意iOS Safari的限制及旧版浏览器支持问题。
在HTML5中实现复制粘贴功能，通常需要借助浏览器的剪贴板API。为了保证在不同浏览器中的兼容性，需结合document.execCommand（已废弃但广泛支持）和现代的异步Clipboard API进行降级处理。
使用现代 Clipboard API（推荐）
注意：现代浏览器推荐使用异步 Clipboard API，但需要 HTTPS 环境或本地开发环境（localhost）支持。以下代码将文本写入剪贴板：
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
}
读取剪贴板内容：
async function pasteText() {
try {
const text = await navigator.clipboard.readText();
console.log('粘贴内容:', text);
return text;
} catch (err) {
console.error('读取失败:', err);
}
}
兼容旧浏览器：使用 document.execCommand
对于不支持 Clipboard API 的浏览器（如 IE 或旧版 Chrome/Firefox），可使用document.execCommand('copy')实现兼容。
实现步骤：
- 创建一个临时的