浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于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); });
上述简单的三个步骤便可以实现简单的复制内容;
兼容性: