本篇文章主要介绍了Html5剪切板功能的实现代码，内容挺不错的，此刻分享给大家，也给大家做个参照 。 本篇文章主要介绍了Html5剪切板功能的实现代码，内容挺不错的，此刻分享给大家，也给大家做个参照 。

比来运用Vue开发Line(日韩的一款相似中国微信平台)的内嵌H5.里面的有一个需求就是将目前链接粘贴，然后发送到pc端，在电脑上进行打开。所有搜集寻到了一下几种状况：

1.不带input输入框的原生js办法

这种状况适用于复制非输入框中的文本到剪切板

     
被复制的内容
     点击复制

     《script》
        (function(){
            button.addEventListener('click', function(){
                var copyDom = document.querySelector('#content');
                //新建选择范畴
                var range = document.createRange();
                range.selectNode(copyDom);
                //移除剪切板中内容
                window.getSelection().removeAllRanges();
                //增加新的内容到剪切板
                window.getSelection().addRange(range);
                //复制
                var successful = document.execCommand('copy');

                try{
                    var msg = successful ? "successful" : "failed";
                    alert('Copy command was : ' + msg);
                } catch(err){
                    alert('Oops , unable to copy!');
                }
            })
        })()
    《script》

2.带输入框的原生js办法

用于复制input，textarea中的文本

     

    复制输入框中内容
    《script》
        (function(){
            button.addEventListener('click', function(){
                input.select();
                document.execCommand('copy');
                alert('复制成功');
            })
        })()
    《script》

这种办法也可以进行延深，充当和办法1同样的用法。动态新建一个input输入框，将其内容置为想复制的内容，最后在将其移除或者隐蔽即可。

3.js复制内容到剪贴板插件（clipboard.js）

clipboard.js官网
clipboard.js CDN地址

援用方式：
NPM npm install --save clipboard
CDN