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>

第二部分

使用这个：https://github.com/zenorocha/clipboard.js
引入这个插件的js，

使用方法，去看他的demo吧，拜拜！

（完）