有的时候我们需要对某些元素进行复制。
下面是我使用的最简单的实现方法。亲测有效。
首先需要引入必要的类库：
<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">欢迎来到hellojava.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="欢迎来到hellojava.com">copy</button>
他们最终结果都是会把 欢迎来到hellojava.com 复制到粘贴板里。
如果你希望你是用 cut(剪切) 而不是 copy 我们也可以在按钮里增加 data-clipboard-action="cut" 来支持 比如:
<!-- Target --> <textarea id="bar">欢迎来到hellojava.com</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button>
具体的文档可以参照:https://clipboardjs.com/
