Clipboard.js 在华为手机中的兼容

果然大厂的 bug 都要屌一点

问题表现

最近接手一个需求,需要实现一个点击复制的功能,当点击触发按钮后,自动将一段文本复制到剪贴板,本着不(jiu)重(shi)复(yin)造(wei)轮(lan)子的想法,我搜索了一番,发现了广受好评的 Clipboard.js。了解一番后发现 Clipboard.js 的原理是利用 DOM 提供的 execCommand 方法来执行 copy 命令,不足的是 execCommand 这个 api 并不是所有浏览器都能用,但幸好针对不兼容的浏览器 Clipboard 能够高亮选中文本并提示用户手动复制,达到降级的目的。开发过程中一切都很正常,但在做适配测试的时候,部分华为手机的表现比较诡异:提示复制成功但此时剪贴板却是空的或者还是上一次手动复制的内容,很明显它根本没有执行复制命令,但却告诉我复制成功了。换用官方给的代码 demo 以及自己用原生 execCommand 实现的代码表现都雷同。

解决方案

既然知道原因,问题就好解决了,我采用的办法是新增一个标志位,然后监听目标元素的 copy 事件,只有当 copy 事件真实触发时才改变标志位状态,然后通过判断标志位来决定往后的逻辑,就酱~!