js操作剪贴板，实现点击按钮复制文本功能

最新推荐文章于 2023-08-15 22:07:33 发布

原创最新推荐文章于 2023-08-15 22:07:33 发布 · 990 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页文本复制的方法。通过select()选择文本并利用document.execCommand('copy')执行复制操作，实现了对特定元素内的文本进行复制的功能。

需求：点击copy按钮，将页面某文本复制到剪贴板上

前言：1.select()，选中文本的方法，只用于<input>、<textarea>控件；

2.document.execCommand(),执行浏览器命令，参数有copy、cut、paste，即拷贝、剪切、粘贴;

3.为避免某些浏览器不支持document.execCommand方法，建议将调用方法放到try-catch块内

代码实现：

copyBtn.onclick = function(){
    //获取input框节点
    var inputNode = document.getElementById("input");        
    try{
        //选中input框文本内容
        inputNode.select();
        //执行浏览器copy命令
        document.execCommand("copy");
    }catch(e){
        console.log(e)
    }
}

注：window.clipboardData 对象也可以操作剪贴板，但仅IE和firefox支持，在此就不做解释了。