需求描述

需要在浏览器中用 JS 实现复制文本的功能，不要求是用户直接能看到的文本。点个按钮然后复制指定的文本到系统剪贴板中也是可以的。

实现过程

2018年06月22日更新：在部分安卓手机上，复制出来的文本为空，QQ、独立浏览器均有此情况。但同事又说她当时测试的时候是没问题的。如果不是代码的问题，那就是自己在测试的时候，没能访问更新后的页面。但是安卓版本的 QQ 是没法 刷新内置浏览器中的页面的，这就很恶心了。

Google js copy text，第一个链接就是 Stack Overflow 上的：How do I copy to the clipboard in JavaScript?，回答也是干货满满。

但是！在点开 Stack Overflow 的链接之前，一眼瞅到第四条搜索结果就是 GitHub 上现成的项目：zenorocha/clipboard.js。有现成的东西，就懒得自己从头实现了，嘿嘿。

安装了这个库之后，想在项目中应用，但是由于子组件用到了 vue-js-modal 模态对话框，如果点击事件没有被触发，对话框不会被初始化，就没办法在父组件中复制对话框内的文本了。（后来想想，数据就在父组件中，子组件直接通过 emit 通知父组件，然后让父组件完成复制的工作就可以了嘛。）

于是再上 GitHub 搜索，找到了 Inndy/vue-clipboard2 这个项目，测试了一下，果然 OK 了。

兼容性统计

• Google：ios execCommand
• Google：Android execCommand
• Copy to clipboard using Javascript in iOS：iOS >= 10 的版本都支持
• Using document.execCommand('copy') in mobile：Android 没办法统计出来很详细的信息，只知道 Chrome for Android 42+、Firefox Mobile (Gecko) 41+ 是支持的
• clipboard.js 是如何控制设备的剪切板的？：可以用 document.queryCommandSupported('copy') 来检查浏览器是否支持复制功能
• 再看看 caniuse 和 MDN 上的数据

参考资料

• zenorocha/clipboard.js
• Vue中配合clipboard.js实现点击按钮复制内容到剪切板
• Inndy/vue-clipboard2

要点总结