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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
JS修改css样式style浅谈
May 06 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
javascript Keycode对照表
2009/10/24 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Django重设Admin密码过程解析
2020/02/10 Python
python如何进行矩阵运算
2020/06/05 Python
python如何导入依赖包
2020/07/13 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
医学生自我鉴定范文
2013/11/08 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2015年副班长工作总结
2015/05/15 职场文书
管辖权异议上诉状
2015/05/23 职场文书
签证工作证明模板
2015/06/15 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
sql字段解析器的实现示例
2021/06/23 SQL Server
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫