js复制内容到剪切板

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_34272308

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hanguozhi/p/9079042.html

本文介绍两种实现网页内容复制的方法：一种是通过原生JavaScript创建并操作输入框来实现；另一种则是借助clipboard.js插件简化实现过程。两种方法均可将指定内容复制到用户的剪贴板。

注意第一部分的内容不兼容Safari，全兼容的请使用第二部分方法

第一部分

查看demo请点这里。

原生js复制指定内容到剪切板，超简单的实现方式，

实现思路如下：

1.创建一个input，把想要复制的内容赋值到input的value上；

2. 把这个input插入到body内；

3.获取这个input，对它执行选中；

4.执行documen的copy事件；

5，删除刚刚插入的input。

代码如下：

html:

<button id="btn">复制</button>

js:

// 复制的方法
function copyText(text, callback){ // text: 要复制的内容， callback: 回调
    var tag = document.createElement('input');
    tag.setAttribute('id', 'cp_hgz_input');
    tag.value = text;
    document.getElementsByTagName('body')[0].appendChild(tag);
    document.getElementById('cp_hgz_input').select();
    document.execCommand('copy');
    document.getElementById('cp_hgz_input').remove();
    if(callback) {callback(text)}
}

// 点击按钮调用复制
document.getElementById('btn').onclick = function (){
    copyText( '123456', function (){console.log('复制成功')})
}

直接复制下来看效果的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
        
        <button id="btn">复制</button>
        
        <script type="text/javascript">
            
            // 复制的方法
            function copyText(text, callback){ // text: 要复制的内容， callback: 回调
                var tag = document.createElement('input');
                tag.setAttribute('id', 'cp_hgz_input');
                tag.value = text;
                document.getElementsByTagName('body')[0].appendChild(tag);
                document.getElementById('cp_hgz_input').select();
                document.execCommand('copy');
                document.getElementById('cp_hgz_input').remove();
                if(callback) {callback(text)}
            }
            
            // 点击按钮调用复制
            document.getElementById('btn').onclick = function (){
                copyText( '123456', function (){console.log('复制成功')})
            }

        </script>
    </body>
</html>