有的时候我们需要对某些元素进行复制。
下面是我使用的最简单的实现方法。亲测有效。
首先需要引入必要的类库:
<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-target
d属性外,如果我们希望直接把要复制的内容写在复制按钮里,那改成 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/