mobile browser clipboard

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

security

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

大多数浏览器支持，但是Mac上的safari和IOS不支持
Support varies across browsers无法跨浏览器提供完整的功能
必须由用户触发，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的内容，也可以复制元素自定义属性的内容

<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

用户只要点击了就能复制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

mobile browser clipboard

security

使用 document.execCommand('copy') API

clipboard.js

reference

推荐阅读更多精彩内容

使用 `document.execCommand('copy')` API