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

原文地址:https://www.cnblogs.com/web-wjg/p/8621827.html