/教程/前端/ 使用clipboard.js实现复制粘贴功能

使用clipboard.js实现复制粘贴功能

前端662019-03-26

使用clipboard.js实现复制粘贴功能

网上找了不少发现clipboard.js使用方便简洁,墙裂推荐

github地址

https://github.com/zenorocha/clipboard.js/

cdn地址

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

对于HTML来说,我们有两种用法。

//html部分
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target='#copyValue'>复制</button>
//js部分
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
var clipboard = new Clipboard('button');
clipboard.on('success',function(e){
 e.clearSelection();
 alert('复制成功');
 });
clipboard.on('error',function(e){
 e.clearSelection();
 alert('复制失败');
 });

说明:如果我们使用按钮复制的是另一个元素的内容,则我们可以使用这种方法。此时将按钮称为触发元素,被复制的元素称为目标元素。此时data-clipboard-target的值为目标元素的选择器,而data-clipboard-target的属性被设置在触发元素上。new Clipboard()为实例化对象,参数可以是HTML元素,元素选择器。有success和error两个事件可以供我们监听,实现自己的逻辑。因为复制完成后,目标元素会处于选中状态,所以我们需要e.clearSelection()取消目标元素的选中状态。

优点:复制的内容可以是动态的,目标元素的值发生变化,复制的值也发生变化。


适用场景:复制内容可变,不固定。


//html部分
<button class="btn" data-clipboard-text="1">Copy</button>
//js部分
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
alert(e.text);
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});
</script>

说明:data-clipboard-text的值为你要复制的内容。无目标元素,只有触发元素。

缺点:复制的内容是静态的,不变的,提前设置好的。

适用场景:复制内容固定不变




标签: jQuery  复制粘贴 

有什么新鲜事想告诉大家?

发表