博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》用浏览器剪贴板复制文字不用JS库目录昨晚写了个复制按钮用户一点击就报错Uncaught TypeError: Cannot read property writeText of undefined。兄弟们这报错太熟悉了别再用库了原生API早就能干这事。为啥报错因为浏览器原生APInavigator.clipboard要求HTTPS环境。本地开发用file://也能跑但一上线就GG。更坑的是IE、旧版Chrome根本不支持这个API。写了个库结果发现浏览器原生早就支持了气死我了。别慌原生API真香。直接上代码// 用原生剪贴板API复制文字asyncfunctioncopyText(text){// 1. 检查浏览器是否支持clipboard APIif(navigator.clipboard){// 2. 异步写入必须用awaittry{awaitnavigator.clipboard.writeText(text);console.log(复制成功);returntrue;}catch(e){console.error(API失败:,e);returnfalse;}}else{// 3. 旧浏览器回退用textarea和execCommandconsttextareadocument.createElement(textarea);textarea.valuetext;document.body.appendChild(textarea);textarea.select();// 4. 执行复制命令同步操作document.execCommand(copy);document.body.removeChild(textarea);console.log(旧浏览器兼容模式);returntrue;}}对比错误代码// 错误示范直接调用navigator.clipboard.writeText(测试文本);// 旧浏览器直接报错避坑总结HTTPS必须本地开发用localhost也行file://可能失效。用async/await处理异步别写回调地狱。旧浏览器回退别漏了execCommand要手动删textarea。别在非用户触发的事件里用比如onload浏览器会拒绝。写完测试复制成功。爽别再装clipboard.js了。10KB的库原生API才几行代码。写完直接跑用户反馈“这功能真快”比库还稳。