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

Posted 2022-01-21 leiting

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

 )