纯js实现复制粘贴

来源:互联网 发布:linux怎么创建用户密码 编辑:程序博客网 时间:2024/05/16 11:46

1.先下载clipboard.min.js(搜这个github上面有这个包)
2.在你的页面引入
3.使用
var clipboard = new Clipboard(‘.moreRecord’, {
text: function(trigger) {
return ‘id’;
}
});
clipboard.on(‘success’, function(e) {
console.log(e);
});
clipboard.on(‘error’, function(e) {
console.log(e);
});
用法:
官方有很多种,但我感觉这种textFunction的方法是其他所有的方式的衍生,所以就说这种 new Clipboard的第一个参数是要绑定的对象 ‘.className’,’#id’,都是帮class为className的对象绑定事件,text:function()设置剪切板上的内容,return 可以是函数的计算值,但是注意不要是全局变量的值,除非你这个值是固定的,因为这个function是在一个代码块中的,调用外部的变量值,调用的是引用就会导致复制的永远是最后一次的值。trigger参数是触发事件的标签对象,trigger.getAttribute(“id”)可以获取到触发的标签的id。其他的html属性都是同理。
碰到的问题:
1.有时候会出现复制成功,但是剪切板上没有(复制不到一般是因为复制的时候,内容不可见)复制是无法复制到隐藏的东西的,出现这个就是因为是bootstrap的modal默认是隐藏的无法复制,当modal弹出时是复制不到的,你先得modal.hide(),然后就可以复制到了。
2.success调用多次,当你注册多次同一个多次时,同一个页面的事件是不会出现覆盖的问题,他每个都会调用,剪切板上是最后一次复制的值,解决方案:每次注册的时候都把对象用数组变量存起来,下次又要注册时,先调用clipboard.destroy(),把之前的事件释放掉。

原创粉丝点击