写在前面

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

没想到现在这个复制的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 日
如果您对各种技术博客文章感兴趣,欢迎关注拓行公众号,分享各种专业技术知识~