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

2022-08-29 15:20:28

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

 })

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

码农公寓

相关文章