欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-11 21:22:45
1.前沿 一句话介绍下clipboard.js:实现了纯 javascript (无 flash)的浏览器内容复制到系统剪贴板的功能。 在项目中使用clipboar...

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属性绑定。

如下:

<!-- target -->
<textarea id="bar">mussum ipsum cacilds...</textarea>

<!-- trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
 cut to clipboard
</button>

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

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

new clipboardjs('.btn', {
 text: function(trigger) {
  return trigger.getattribute('aria-label'); // 返回需要复制的内容
 }
});

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

3、寻找原因

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

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

大意就是:复制或者剪切操作之后会选中对象,这个对象会通过触发一些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、解决问题的思路有很多。按照逻辑思维,一般是根据问题的表象去分析问题,得出几种思路后,再去验证,最终解决问题。但有时候先不纠结于问题的表象和原因,条条大路通罗马,换一种方式去实现功能,也不错。不管哪种方式去解决,都有不一样的付出和收获。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。