写在前面

想着搞一个 复制文本的方法,复制到剪贴板

没想到现在这个复制的api那么奇怪,兼容性问题一大堆,干脆整合到一起算了

实现

复制脚本

复制脚本

// 复制内容到粘贴板 function copyToClipboard(val) { if(val.length==0) return false; try { // 现代浏览器推荐方式(需要 HTTPS 环境) navigator.clipboard.writeText(val) .then(() => { console.log("复制成功"); alert("复制成功!"); }) .catch(err => { console.error("复制失败:", err); fallbackCopy(val); // 降级方案 }); } catch (err) { // 兼容旧浏览器 fallbackCopy(val); } // 传统复制方法(兼容方案) function fallbackCopy(val) { // 创建临时文本域元素 const textarea = document.createElement('textarea'); textarea.style.position = 'fixed'; // 避免影响页面布局 textarea.style.opacity = '0'; textarea.value = val; // 使用 value 而非 innerText 更适合文本域 document.body.appendChild(textarea); try { // 选中文本 textarea.select(); textarea.setSelectionRange(0, 99999); // 兼容移动设备 // 执行复制命令 const successful = document.execCommand('copy'); if (successful) { console.log("传统方法复制成功"); alert("复制成功!"); } else { throw new Error("复制命令执行失败"); } } catch (err) { console.error("复制失败:", err); alert("复制失败,请手动复制"); } finally { // 无论复制成功或失败,都移除临时元素 document.body.removeChild(textarea); } } }

欢迎关注拓行公众号,分享各种技术博客文章

拓行——奋勇进取,开拓未来,砥砺前行

最后修改:2025 年 07 月 06 日
如果您对各种技术博客文章感兴趣,欢迎关注拓行公众号,分享各种专业技术知识~