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吧, 拜拜!

 

 

 

 

(完)

 

posted @ 2018-05-23 20:02  寒玉知  阅读(29246)  评论(3编辑  收藏  举报