在项目中使用clipboard.js插件去实现点击按钮,复制当前订单号。功能做好后,一开始无论这pc端还是移动端都能很正常使用。突然某一天测出了一个bug:
移动端复制失败但是pc端却是好好的
说起这个clipboard.js
其实刚开始自己在写项目时候也是有自己封装过一下复制方法的,但是由于轮子太好用(自己太菜)
所以很难进行兼用性测试。之后使用了这个插件,最开始写了一个推广页面时候是一次再写一个活动推广页时候,所以用的jq + Html
但是写完测试时候发现safari
移动端不能复制。后来查到clipboard.js
不能复制异步返回的结果.所以将Ajax
改为了同步 可以进行复制
本次项目复制的是一个订单号,使用vue2,于是也是想也没想使用了vue2版本的clipboard
,毕竟clipboard轮子已经造好了,就是为了解决复制功能兼容性为目标诞生的。还是要相信轮子的实力。clipboard.js文档链接,对比文档之后我写的并没有错误,而且也不是第一次使用,有了之前使用的经验,所以一定是自己哪里疏忽了。
找起来真是个艰难的过程....就离谱后来看了一眼clipboar.js
的源码,结合文档有这么一句话
复制或者剪切操作之后会选中对象,这个对象会通过触发一些cases(事件)去捕获和反馈信息。复制后的对象是被选中状态
(selected)
的。
selected
这个一下就被我联想到了,刚才添加的需求不让用户选中文本拖拽.... 于是果断注释了user-select: none;
大功告成...此时已经可以复制订单号了!
文章标题:解决clipboard.js在移动端复制失败的问题--特别是safari浏览器
文章作者:未知用户
文章链接:[复制]
最后修改时间:2024年 01月 13日 15时39分
商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。 本文采用CC BY-NC-SA 4.0进行许可。
Copyright © 2023--2025
豫ICP备2022014268号-1
我们历经沧桑,这样错过了一生最好的时光,错过了便是永远