有的时候我们需要对某些元素进行复制。
下面是我使用的最简单的实现方法。亲测有效。
首先需要引入必要的类库：
<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>然后就在copy的按钮或元素里写上 data-clipboard-target 属性，这里的属性一般是ID，写法就是 data-clipboard-target="#copytext"
<p id="copytext">欢迎来到zhanzhang123.com</p><button click-type="copy" data-clipboard-target="#copytext">copy</button>最后我们写上事件
$(function(){
$('[click-type="copy"]').each(function () {
var clipboard = new Clipboard(this);
clipboard.on('success', function (e) {
alert('复制成功');
});
clipboard.on('error', function (e) {
alert('复制失败');
});
});
})就可以实现了。
当然 除了data-clipboard-targetd属性外，如果我们希望直接把要复制的内容写在复制按钮里，那改成 data-clipboard-text 就行了。比如
<button click-type="copy" data-clipboard-text="欢迎来到zhanzhang123.com">copy</button>他们最终结果都是会把 欢迎来到zhanzhang123.com 复制到粘贴板里。
如果你希望你是用 cut(剪切) 而不是 copy 我们也可以在按钮里增加 data-clipboard-action="cut"来支持 比如:
<!-- Target -->
<textarea id="bar">欢迎来到zhanzhang123.com</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
