解决clipboard.js在移动端复制失败的问题--特别是safari浏览器

解决clipboard.js在移动端复制失败的问题–特别是safari浏览器

前言

在项目中使用clipboard.js插件去实现点击按钮，复制当前订单号。功能做好后，一开始无论这pc端还是移动端都能很正常使用。突然某一天测出了一个bug：移动端复制失败但是pc端却是好好的

说起这个clipboard.js其实刚开始自己在写项目时候也是有自己封装过一下复制方法的,但是由于轮子太好用(自己太菜)所以很难进行兼用性测试。之后使用了这个插件，最开始写了一个推广页面时候是一次再写一个活动推广页时候,所以用的jq + Html但是写完测试时候发现safari移动端不能复制。后来查到clipboard.js不能复制异步返回的结果.所以将Ajax改为了同步 可以进行复制

话说这次

本次项目复制的是一个订单号,使用vue2，于是也是想也没想使用了vue2版本的clipboard，毕竟clipboard轮子已经造好了，就是为了解决复制功能兼容性为目标诞生的。还是要相信轮子的实力。clipboard.js文档链接，对比文档之后我写的并没有错误,而且也不是第一次使用,有了之前使用的经验，所以一定是自己哪里疏忽了。

找bug

找起来真是个艰难的过程…就离谱后来看了一眼clipboar.js的源码，结合文档有这么一句话

复制或者剪切操作之后会选中对象，这个对象会通过触发一些cases（事件）去捕获和反馈信息。复制后的对象是被选中状态（selected）的。

selected这个一下就被我联想到了，刚才添加的需求不让用户选中文本拖拽… 于是果断注释了user-select: none;大功告成…此时已经可以复制订单号了!