点击复制文字到剪贴板兼容性安卓ios

一般那种活动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(‘复制失败,请长按复制‘); }); }) 

 

相关文章