您的当前位置:首页>全部文章>文章详情

简单几行代码实现JS复制文字到剪切板的功能,兼容IE浏览器

发表于:2021-10-29 15:19:02浏览:1841次TAG: #javascript #复制

目前很多项目使用复制功能都是用知名 clipboard.js 开源项目做的,功能很完善,不仅有复制的实现,还有剪切等。不过代码量蛮多的,如果项目对代码体积不那么在意,自己也不想关心具体的实现细节,可以使用这个著名的剪切板项目 clipboard.js:

https://github.com/zenorocha/clipboard.js/


如果不想要那么庞大的体积代码,可以考虑下面的方法,几行代码就可以搞定,而且还兼容IE浏览器哦。

//拷贝
function copyToClip:(content) {
    if (navigator.clipboard) {
        // clipboard api 复制
        navigator.clipboard.writeText(content);
    } else {
        var copy_textarea = document.createElement('textarea');
        // 隐藏此输入框
        copy_textarea.style.position = 'fixed';
        copy_textarea.style.clip = 'rect(0 0 0 0)';
        copy_textarea.style.top = '20px';
        copy_textarea.value = content;
        document.body.appendChild(copy_textarea);
        // 选中
        copy_textarea.select();
        // 复制
        document.execCommand('copy', true);
        // 移除输入框
        document.body.removeChild(copy_textarea);
    }
    alert('复制成功');
}