clipboard.js存在的问题

Posted 2020-11-11 小则又沐风

clipboard.js  是一个复制到剪贴板的库。

github：https://github.com/zenorocha/clipboard.js

兼容性：IE9一下不支持。

再做微信端的项目接到了一个需求。点击按钮把指定的内容复制到剪贴板中。

刚开始用的是：document.execCommand("Copy"); 大部分的属性只有IE支持。比如：贴贴。

想了想我只用复制而且用的是微信端。只要安卓和苹果支持能够使用就可以了。

<input type="text" id="contents" value="测试复制">
<a id="but" onclick="jsCopy()">点击复制</a>

<script type="text/javascript">
    function jsCopy(){
      var e=document.getElementById("contents");//对象是contents
      e.select(); //选择对象
      tag=document.execCommand("Copy","false",null); //执行浏览器复制命令
      if(tag){
        alert(‘复制内容成功‘);
      }
    }
</script>   

emmmmmmm。缺点就是：必须要一个input文本框才能使用。而且还不能display:none隐藏掉。必须opacity。

有点坑，先测试，安卓华为：成功。苹果5：失败。

苹果失败了那就pass掉。

从网上找找有没有库。ZeroClipboard.js

这个库通过加载一个 Flash 来实现的。这个我是拒绝的。不过后来测试了一下。安卓成功，苹果失败。（可能没仔细研究）

再找：

Clipboard.js 。体积少，没有引入乱七八糟的东西。我比较喜欢。

　<a id="but" >点击复制</a>

<script type="text/javascript">
    var clipboard = new Clipboard(‘#but‘, {
    text: function() {    // 如果想从其它DOM元素内容复制。应该是target:function(){return: };
      return ‘测试复制‘;
    }
  });
  clipboard.on(‘success‘, function(e) {
    alert("复制成功");
  });

  clipboard.on(‘error‘, function(e) {
    alert("复制失败");
  });
</script>

结构比较明确。new一个实例。然后调用方法。

再测试，安卓：成功。 苹果：失败。

why!!!!!

从网上找：

想让苹果支持这个功能。元素只能为button标签。其它均不成。

　<button id="but" >点击复制</button>

<script type="text/javascript">
    var clipboard = new Clipboard(‘#but‘, {
    text: function() {    // 如果想从其它DOM元素内容复制。应该是target:function(){return: };
      return ‘测试复制‘;
    }
  });
  clipboard.on(‘success‘, function(e) {
    alert("复制成功");
  });

  clipboard.on(‘error‘, function(e) {
    alert("复制失败");
  });
</script>

　成功！。