js实现点击复制网页内容（基于clipboard.js）

浏览网页过程中会遇到点击复制链接地址的情况，下面就介绍一种实现方法，该方法是基于clipboard.js；

官网地址：https://clipboardjs.com/；

clipboard.js使用比较简单，可通过script直接引入；

步骤1：引入clipboard.js

<script src="clipboard.min.js"></script>

步骤2：html

<!-- Target -->    
<span id="foo">哈哈,我被复制了</span>
<!-- Trigger --> 
<button class="btn" data-clipboard-target="#foo" data-clipboard-action="copy">复制</button>
<!--剪切时：data-clipboard-action="copy"-->

步骤3：js方法

var clipboard = new ClipboardJS(\'.btn\');
clipboard.on(\'success\', function(e) {
    console.info(\'Action:\', e.action);
    console.info(\'Text:\', e.text);
    console.info(\'Trigger:\', e.trigger);
    alert(\'复制成功\');
    e.clearSelection();                
});

clipboard.on(\'error\', function(e) {
    console.error(\'Action:\', e.action);
    console.error(\'Trigger:\', e.trigger);
});

 上述简单的三个步骤便可以实现简单的复制内容；

兼容性：

 

详细参考:https://www.npmjs.com/package/clipboard