一般那种活动H5分享可能会用到点击复制文字到剪贴板,很简单的功能
于是搜了一搜:js复制文字到剪贴板,可用结果大致分为两类:
一类是js原生方法,这种方法兼容性不好,不兼容ios;
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
另外,还有一些坑要注意
input/textarea为disabled不可用(readonly可以)
input/textarea为hidden不可用
try{var copy = document.execCommand('copy'); if(copy){
alert('复制成功!')
}else{
alert('复制失败,请长按复制!')
}}catch(e){
console.log(e)
}
另一类是插件:主要提到的插件是 clipboard.js 插件,轻便,兼容高版本浏览器,目前大部分安卓ios都支持
这个插件也有一些坑要注意
点击复制,加了个阻止冒泡事件之后这个就怎么也不管用了。。去掉之后就好了,神奇。。mark下~有空看下clipboard的实现原理
import ClipboardJS from 'clipboard'var clipboard = new ClipboardJS('.link-box-textarea');
$(document).on('click', '.link-box-textarea', function (e) { // 点击复制到剪贴板
clipboard.on('success', function (e) {
alert('复制成功!');
}); // 如果复制失败就把只读属性去掉,让他自己长按复制
clipboard.on('error', function (e) {
$('.link-box-textarea').removeAttr('readonly');
alert('复制失败,请长按复制');
}); })