clipboard.js在移动端复制失败的解决方法

1.前沿

⼀句话介绍下clipboard.js：实现了纯 JavaScript (⽆ Flash)的浏览器内容复制到系统剪贴板的功能。

在项⽬中使⽤clipboard.js插件去实现点击按钮，复制⼀段⽹址到剪切板的功能。功能做好后，⼀开始⽆论这pc端还是移动端都能正常使⽤。突然某⼀天测出了⼀个bug：移动端复制失败，pc端是ok的。简直⼀脸懵逼。。。

遇到这个bug，我第⼀个思考到的是，这是个常⽤的插件，⽹上应该有现成的解决⽅法。⽹友分享的⽅法是：把绑定data-clipboard-target属性的按钮标签从div换成button。亲测后，不起效果，可能不是⼀个原因导致的。通过摸索，找到了bug的原因和可解决⽅案。我相信，在移动端的项⽬中使⽤到clipboard插件，有很⼤的概率会踩到这个坑，下⾯就讲讲解决这个bug的历程。2、透过表象思考

思考：为什么随着项⽬的进⾏，复制功能会失效？我的猜想是：可能是全局禁⽤了⼀些默认事件，导致了clipboad.js内部实现复制功能与禁⽤的默认事件冲突，所以才复制失败。按这个猜想去排查的两个思路：

　　1、去看clipboard的源码了，找到复制功能的具体实现原理，与哪些事件和默认事件有关联，再去寻找冲突点。　　2、业务代码中去排查，哪⾥做了全局事件的配置，这些配置⼀个个排查，找出影响了clipboad复制功能的配置。第⼀种思路相对⽜⽪，学习了clipboard原理也是极好的。第⼆种，是⽐较笨拙的⽅法，但是有时候是⽐较有效的，有可能在少量的试验中就找到了bug点。但是经常是找不出来的，所以只可花少量的时间去试验第⼆种⽅法。其实，这⾥还有第三种思路，就是换⼀种⽅式去实现复制功能，可能新的实现⽅式不受影响，可兼容各平台。clipboard轮⼦已经造好了，就是为了解决复制功能兼容性为⽬标诞⽣的。毕竟还是要相信轮⼦的实⼒。通读⽂档，有两种⽅式去实现复制功能。1、我使⽤的是⽅法1: html属性绑定。如下：

Mussum ipsum cacilds...

Cut to clipboard

这个就是出现上述bug所使⽤的⽅法。

2、改成了⽂档说明的另外⼀种实现⽅法2: js配置参数。如下：

new ClipboardJS('.btn', { text: function(trigger) {

return trigger.getAttribute('aria-label'); // 返回需要复制的内容 }});

改成⽅法2后，成功解决了移动端复制失败的问题。到此为⽌，若不深究，bug已经被解决，任务完成。3、寻找原因

可以说，“投机取巧”，花最⼩的代价，解决了bug。问题虽然解决了，但⼼有不⽢，想找出bug出现的原因。回头认真看了下官⽅⽂档，在对⽅法的描述中，看到这么⼀段话：

⼤意就是：复制或者剪切操作之后会选中对象，这个对象会通过触发⼀些cases（事件）去捕获和反馈信息。

重点就是：第⼀⾏中的“what has been selected after a copy/cut operation”这句话。根据描述，复制后的对象是被选中状态（selected）的。

然后我⽴马想到⼀个事情。在我的项⽬中，之前有⼀个同事为了实现长按不选中⽂本的功能，把长按选中⽂本的功能全局禁⽤了。。。。。⽤的⽅法是以下css

// 禁⽌选中html,body{ user-select: none;

-moz-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: none;

-webkit-tap-highlight-color: transparent; -webkit-user-select: none;}

找到疑点，通过试验，确实是这个段css导致⽅法1在移动端复制功能失败。（为什么pc端不失效，移动端失效，这归属于兼容吧，具体原因还不懂。。。）

再回头思考，⽅法1⽅法2的区别。可⼤胆推测：⽅法1，受css：user-select的影响，应该跟内部实现原理有关。⽅法2，在new⽣成实例的时候传⼊text参数，通过js返回复制内容，所以不受css：user-select的影响。⼀切推测和表象，达成⾼度切合。到这⾥，我只能说，这只是⼀个强有⼒的推测。⽽这个推测是否完全成⽴，还得研究clipboard.js源码的实现原理，才能真正判断。

问题点找到，解决⽅案也有了。此bug暂告⼀个段落！！舒服（放松脸）。。。。。4、总结：

1、解决问题的思路有很多。按照逻辑思维，⼀般是根据问题的表象去分析问题，得出⼏种思路后，再去验证，最终解决问题。但有时候先不纠结于问题的表象和原因，条条⼤路通罗马，换⼀种⽅式去实现功能，也不错。不管哪种⽅式去解决，都有不⼀样的付出和收获。

好了，以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。