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


Posted in Javascript onJune 13, 2018

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、解决问题的思路有很多。按照逻辑思维,一般是根据问题的表象去分析问题,得出几种思路后,再去验证,最终解决问题。但有时候先不纠结于问题的表象和原因,条条大路通罗马,换一种方式去实现功能,也不错。不管哪种方式去解决,都有不一样的付出和收获。

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

Javascript 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
javascript实现五星评分功能
Nov 10 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 #Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 #Javascript
详解webpack运行Babel教程
Jun 13 #Javascript
Babel 入门教程学习笔记
Jun 13 #Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 #Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 #Javascript
js replace 全局替换的操作方法
Jun 12 #Javascript
You might like
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
Javascript实现的分页函数
2006/12/22 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
简介Django中内置的一些中间件
2015/07/24 Python
python实现换位加密算法的示例
2018/10/14 Python
python版DDOS攻击脚本
2019/06/12 Python
python 循环数据赋值实例
2019/12/02 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
linux面试题参考答案(3)
2012/09/13 面试题
门诊手术室工作制度
2014/01/30 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android