Javascript初學筆記 35 利用JS做出一鍵複製功能(document.execCommand())

在各大網站我們都很常見這樣的功能，今天簡單介紹一下如何利用原生的document.execCommand完成這簡單又實用的功能! Clipboard API等到下篇文章再做介紹~

document.execCommand()

document.execCommand()是一連串的指令可以套用在選取的元素上，基本的語法為

 document.execCommand(command, showUI, value) 

command:有一大串的指令可選用，這次僅用到copy，其他的部分可以參考底下的參考連結。

command	有一大串的指令可選用，這次僅用到copy，其他的部分可以參考底下的參考連結。
showUI	接受一個布林值，決定是否顯示該UI效果是否顯示
value	接受一數值，主要是依據部分command所需而給予輸入值

了解基本用法後，我們還需要另一個原生API的協助才能完成複製的功能-HTMLInput​Element
HTMLInput​Element 提供了一些方法讓我們能與input、layout以及options的內容進行互動，常見的幾個用法有以下。

blur()	移除元素上的focus效果
focus()	將游標移至該元素的位置
select()	將游標移至該元素的位置並全選元素的內容
click()	模擬一次點擊該元素的效果

與select方法配合便可以簡單的完成複製效果，請見以下的codepen

非常簡單的手法，但同時也存在著一些缺點。
1.只能針對少數的文字內容進行複製(比方說你想複製一個div的內容，就必須多下點功夫)
2.據說在IOS系統上問題重重，待之後碰到再撰寫文章說明。

參考文章

JavaScript复制内容到剪贴板
MDN HTMLInput​Element
MDN Document​.exec​Command()