clipboard.js在移动端复制失败的解决方法 - 行业资讯 - 肥雀云

一句话介绍下剪贴板。js:实现了纯JavaScript(无Flash)的浏览器内容复制到系统剪贴板的功能。

在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能。功能做好后,一开始无论这pc端还是移动端都能正常使用。突然某一天测出了一个错误:移动端复制失败,pc端是ok的。简直一脸懵逼…

遇到这个错误,我第一个思考到的是,这是个常用的插件,网上应该有现成的解决方法。网友分享的方法是:把绑定data-clipboard-target属性的按钮标签从div换成按钮。亲测后,不起效果,可能不是一个原因导致的。通过摸索,找到了错误的原因和可解决方案。我相信,在移动端的项目中使用插到剪贴板件,有很大的概率会踩到这个坑,

下面就讲讲解决这个bug的历程。

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

1,去看剪贴板的源码了,找到复制功能的具体实现原理,与哪些事件和默认事件有关联,再去寻找冲突点。

2,业务代码中去排查,哪里做了全局事件的配置,这些配置一个个排查,找出影响了clipboad复制功能的配置。

第一种思路相对牛皮,学习了剪贴板原理也是极好的。第二种,是比较笨拙的方法,但是有时候是比较有效的,有可能在少量的试验中就找到了错误点。但是经常是找不出来的,所以只可花少量的时间去试验第二种方法。其实,这里还有第三种思路,就是换一种方式去实现复制功能,可能新的实现方式不受影响,可兼容各平台.clipboard轮子已经造好了,就是为了解决复制功能兼容性为目标诞生的。毕竟还是要相信轮子的实力。通读文档,有两种方式去实现复制功能。

1,我使用的是方法1:html属性绑定。

如下: 　　　　　　& lt; !——目标——比; 　　& lt; textarea id=熬瓢伞弊４荕ussum ipsum cacilds…& lt;/textarea> 　　　　& lt; !——触发比; 　　& lt;按钮类=" btn " data-clipboard-action=跋骷酢眃ata-clipboard-target=?”比; 　　剪切到剪贴板　　& lt;/button> 　　　　

这个就是出现上所述缺陷使用的方法。

2,改成了文档说明的另外一种实现方法2:js配置参数。如下:

　　　　　　新ClipboardJS (”。btn’, { 　　文字:函数(触发){ 　　返回trigger.getAttribute (“aria-label”);//返回需要复制的内容　　} 　　}); 　　　　

改成方法2后,成功解决了移动端复制失败的问题。到此为止,若不深究,错误已经被解决,任务完成。

可以说,“投机取巧”,花最小的代价,解决了错误。问题虽然解决了,但心有不甘,想找出错误出现的原因。回头认真看了下官方文档,在对方法的描述中,看到这么一段话:

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

大意就是:复制或者剪切操作之后会选中对象,这个对象会通过触发一些病例(事件)去捕获和反馈信息。

重点就是:第一行中的“被选中后复制/削减行动”这句话。根据描述,复制后的对象是被选中状态(选择)的。

然后我立马想到一个事情。在我的项目中,之前有一个同事为了实现长按不选中文本的功能,把长按选中文本的功能全局禁用了.....用的方法是以下css

　　　　//禁止选中html,身体{ 　　用户选择:没有; 　　-moz-user-select:没有; 　　-webkit-user-select:没有; 　　-webkit-touch-callout:没有; 　　-webkit-text-size-adjust:没有; 　　-webkit-tap-highlight-color:透明; 　　-webkit-user-select:没有; 　　} 　　　　

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

再回头思考,方法1方法2的区别。可大胆推测:方法,受css:用户选择的影响,应该跟内部实现原理有关。方法2,在新的生成实例的时候传入文本参数,通过js返回复制内容,所以不受css:用户选择的影响。一切推测和表象,达成高度切合。到这里,我只能说,这只是一个强有力的推测。而这个推测是否完全成立,还得研究clipboard.js源码的实现原理,才能真正判断。