1分鐘學(xué)會(huì) 2 個(gè)復(fù)制文本到剪貼板的方法

雖然用戶自己可以選擇文本進(jìn)行內(nèi)容的復(fù)制到剪貼板，但是有一些場(chǎng)景，我們需要通過(guò)一個(gè)按鈕事件進(jìn)行當(dāng)前文本區(qū)域內(nèi)容的復(fù)制，這個(gè)場(chǎng)景在日常中的需求還是比較常見(jiàn)的，你會(huì)怎么做呢？

一、大多人都在用的方法

你可能在用這個(gè)方法進(jìn)行剪貼板的復(fù)制

• 創(chuàng)建一個(gè)文本框區(qū)域 textarea
• 然后將你希望復(fù)制的內(nèi)容填充此文本框
• 接下來(lái)將文本框添加至頁(yè)面
• 然后使用 select 方法進(jìn)行文本框內(nèi)容的選擇
• 然后執(zhí)行 copy 命令
• 最后移除 textarea 文本框

基于以上說(shuō)明，示例代碼如下：

function?copyToClipboard(text){
????const?textArea?=?document.createElement("textarea")
????textArea.value?=?text

????document.body.appendChild(textArea)

????textArea.focus()
????textArea.select()

????document.execCommand('copy')

????document.body.removeChild(textArea)
}

二、你可能不知道的新方法

你可以使用瀏覽器的新API——navigator.clipboard，一段代碼就能實(shí)現(xiàn)簡(jiǎn)單的內(nèi)容復(fù)制

function?copyToClipboard(text){
????navigator.clipboard.writeText(text)
}

三、將兩個(gè)方法整合一起

現(xiàn)在我們可以將新舊方法合在一起，避免新方法在舊的瀏覽器不能使用，我們需要進(jìn)行瀏覽器兼容的適配，示例代碼如下：

function?copyToClipboard(text){
????if(navigator.clipboard){
????????navigator.clipboard.writeText(text)
????????return?//codes?below?wont?be?executed
????}
????const?textArea?=?document.createElement("textarea")
????textArea.value?=?text

????document.body.appendChild(textArea)

????textArea.focus()
????textArea.select()

????document.execCommand('copy')

????document.body.removeChild(textArea)
}

今天的文章就分享到這里，感謝你的閱讀。

來(lái)源?

網(wǎng)址：https://dev.to/0shuvo0/copy-text-to-clipboard-in-jstwo-ways-1pn1

作者：Shuvo