在業(yè)務(wù)中遇到需求需要復(fù)制內(nèi)容，那么就需要訪問操作系統(tǒng)的clipboard涮较，但是其實瀏覽器對此做了限制吹缔，根本的原因在于如果瀏覽器的script能隨意訪問操作系統(tǒng)的clipboard煤蚌，那么很多用戶的個人數(shù)據(jù)和敏感數(shù)據(jù)就會泄露，因為腳本可以收集起來然后發(fā)送到遠(yuǎn)程的服務(wù)器上
security
但是現(xiàn)在舷礼，瀏覽器支持基本的clipboard功能泻轰，但是作出了一定的限制
- 大多數(shù)瀏覽器支持，但是Mac上的safari和IOS不支持
- Support varies across browsers無法跨瀏覽器提供完整的功能
- 必須由用戶觸發(fā)且轨，click或者press keyboard事件浮声，script不能隨意的在任意事件使用clipboard
使用 document.execCommand('copy') API
實現(xiàn)復(fù)制的API是document.execCommand('copy')，在使用之前旋奢，我們一般需要判斷瀏覽器支持不支持泳挥，主要有兩個API來使用document.queryCommandSupported('copy')
和document.queryCommandEnabled('copy')
，但是在Chrome中至朗，第一個API返回true屉符，第二個API返回false，所以更常用的方法是
try {
document.execCommand('copy')
} catch(err) {
// handle error
}
下一步锹引，我們要怎樣讓用戶去復(fù)制呢矗钟？我們首先需要高亮文本內(nèi)容，可以使用HTMLInputElement.select()嫌变，即input和textarea的select()方法來高亮文本吨艇，然后再由用戶的一個事件來觸發(fā)document.execCommand('copy')
Chrome和FF支持使用range對象來復(fù)制任意節(jié)點，主要思路就是使用getSelection()API來高亮元素的內(nèi)容腾啥，然后使用document.execCommand('copy')來復(fù)制
clipboard.js
比較成熟的跨瀏覽器方案是使用clipboard.js东涡，提供的API可以復(fù)制input和textarea的內(nèi)容，也可以復(fù)制元素自定義屬性的內(nèi)容
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
用戶只要點擊了就能復(fù)制data-clipboard-text中的內(nèi)容
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
