移动端剪贴板. js复制失败的解决方案

1.边界

一句话介绍clipboard.js:它实现了用纯JavaScript(不带Flash)将浏览器内容复制到系统剪贴板的功能。

项目中利用clipboard.js插件实现了点击按钮，将网址复制到剪贴板的功能。功能完成后，首先pc和手机都可以正常使用。突然有一天，检测到一个bug:移动终端复制失败，pc终端还好。真是一脸懵逼。

遇到这个bug的时候，我第一个想到的就是这是一个普通的插件，互联网上应该有现成的解决方案。网友分享的方法是将绑定了数据-剪贴板-目标属性的按钮标签从div改为button。亲测后没有效果，可能不是一个原因造成的。通过摸索，我们找到了bug产生的原因和可以解决的方案。相信当剪贴板插件在移动项目中使用时，很大概率会踩这个坑。

来说说解决这个bug的过程。

2.透过表象思考

思考：为什么随着项目的进行，复制功能会失败？我的猜测是，有些默认事件是全局禁用的，这导致clipboad.js的内部复制功能与禁用的默认事件冲突，所以复制失败。根据这个猜想，排除故障有两种思路：

1.转到剪贴板的源代码，找出copy函数的具体实现原理，哪些事件与默认事件相关，然后寻找冲突点。

2.对配置了全局事件的业务代码进行故障排除，并逐一检查这些配置，找出影响clipboad复制功能的配置。

与牛皮相比，第一个想法是学习剪贴板的原理是极好的。第二，是一种笨拙的方法，但有时更有效，在几个实验中就有可能发现bug点。但是往往是不可能发现的，所以只能花很少的时间去尝试第二种方法。其实这里还有第三个思路，就是用另一种方式实现复制功能，可能不受新的实现方式影响，兼容各种平台。剪贴板轮子已经建成，它的诞生是为了解决复制功能的兼容性。毕竟我们还是要相信轮子的力量。通过通读文档实现复制功能有两种方式。

1.我使用方法1: html属性绑定。

如下所示：

！-Target-text area id=' bar ' Mussam ipsum cacilds./textarea！-触发器-按钮类=' BTN '数据-剪贴板-操作='剪切'数据-剪贴板-目标=' # bar '剪切到剪贴板/按钮。这是用于上述错误的方法。

2.文档中描述的另一种实现方法被更改为2: js配置参数。如下所示：

新剪贴板。btn '，{ text : function(trigger){ return trigger . GetAttribute(' aria-label ')；//返回要复制的内容} })；改用方法2后，成功解决了移动复制失败的问题。到目前为止，如果不深入，bug已经解决，任务完成。

3.找到原因

可以说“投机取巧”以最小的代价解决了bug。虽然问题解决了，但我不愿意找出bug的原因。仔细回头看公文，在对方法的描述中，我看到了这样一段话：

复制或剪切操作后，将选择对象，该对象将通过触发某些情况来捕获和反馈信息。

要点是：第一行“复制/剪切操作后选择了什么”。根据描述，选择复制的对象。

然后我马上想到了一件事。在我的项目中，之前有同事为了实现长按未选中文本的功能，禁用了长按选中文本的功能。使用的方法是下面的css

//禁止选择html，正文{用户-选择：无；-moz-用户-选择：无；-web kit-user-select : none；-webkit-touch-callout:无；-webkit-text-size-adjust:无；-web kit-tap-highlight-color :透明；-web kit-user-select : none；}我发现了一些疑惑。通过实验，正是这个css导致方法1在移动端复制功能失败。(为什么pc端失败，移动端失败？这属于兼容性。具体原因还不得而知。)

回头看，方法1和方法2的区别。可以大胆推测，方法1受CSS: user-select的影响，应该与内部实现原理有关。方法2，当new生成一个实例时，它传入text参数，并通过js返回复制的内容，因此不受CSS: user-select的影响。所有的推测和表象都是高度相关的。在这一点上，我只能说这只是一个强烈的猜测。而这种猜测是否完全属实，还得研究clipboard.js源代码的实现原理，才能真正判断。

发现问题点，有解决方案。这个bug已经结束了！

舒适(放松的脸)。

4.总结：

1、解决问题的思路有很多。按照逻辑思维，一般是根据问题的表象来分析问题，得出几个思路，然后进行验证，最后解决。但有时候，不去关注问题的表象和原因，殊途同归，换一种方式实现功能也不错。不管用哪种方式解决，都有不同的努力和收获。

好了，这就是本文的全部内容。希望本文的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。