ClipboardJS复制粘贴插件的使用

1、简单的纯JS复制粘贴(兼容性差,只能用textarea标签)

1
2
3
4
5
6
var btn=document.getElementsByClassName("btn")[0];  //复制按钮
btn.onclick=function(){
  var foo = document.getElementById("foo");  //要复制的节点,只能是textarea
  foo.select();
  document.execCommand("Copy");
}

2、ClipboardJS插件的使用

(一)简单的使用

1
2
3
4
<textarea id="foo">123</textarea>  //被复制对象
<button class="btn" data-clipboard-target="#foo" data-clipboard-action="copy">复制</button>  //复制
 
new ClipboardJS('.btn');

(二)高级的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
ClipboardJS.isSupported()  //是否兼容
 
var clipboard = new ClipboardJS('.btn', {
  target: function(trigger) {
    return document.getElementById("foo")  //选择对象
  }
});
 
var clipboard = new ClipboardJS('.btn', {
  text: function(trigger) {
    return 123567;  //复制内容
  }
})
 
clipboard.on('success', function(e) {
  console.info('Action:', e.action);  //复制类型
  console.info('Text:', e.text);  //复制文本
  console.info('Trigger:', e.trigger);  //复制节点
  e.clearSelection();  //取消选择节点
});  
 
clipboard.on('error', function(e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});

  

posted @   kimingw  阅读(3408)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示