mobile browser clipboard

在业务中遇到需求需要复制内容，那么就需要访问操作系统的clipboard，但是其实浏览器对此做了限制，根本的原因在于如果浏览器的script能随意访问操作系统的clipboard，那么很多用户的个人数据和敏感数据就会泄露，因为脚本可以收集起来然后发送到远程的服务器上

security

但是现在，浏览器支持基本的clipboard功能，但是作出了一定的限制

1. 大多数浏览器支持，但是Mac上的safari和IOS不支持
2. Support varies across browsers无法跨浏览器提供完整的功能
3. 必须由用户触发，click或者press keyboard事件，script不能随意的在任意事件使用clipboard

使用 document.execCommand('copy') API

实现复制的API是document.execCommand('copy')，在使用之前，我们一般需要判断浏览器支持不支持，主要有两个API来使用document.queryCommandSupported('copy')
和document.queryCommandEnabled('copy')
，但是在Chrome中，第一个API返回true，第二个API返回false，所以更常用的方法是

try {
    document.execCommand('copy')
} catch(err) {
    // handle error
}

下一步，我们要怎样让用户去复制呢？我们首先需要高亮文本内容，可以使用HTMLInputElement.select()，即input和textarea的select()方法来高亮文本，然后再由用户的一个事件来触发document.execCommand('copy')

Chrome和FF支持使用range对象来复制任意节点，主要思路就是使用getSelection()API来高亮元素的内容，然后使用document.execCommand('copy')来复制

clipboard.js

比较成熟的跨浏览器方案是使用clipboard.js，提供的API可以复制input和textarea的内容，也可以复制元素自定义属性的内容

    Copy to clipboard

用户只要点击了就能复制data-clipboard-text中的内容

reference

How do I copy to the clipboard in JavaScript?
Copy to Clipboard that also works on Mobile?
这篇文章比较完整的解释了clipboard的历史和使用方法
Roll Your Own Copy to Clipboard Feature in 20 Lines of JavaScript