JS實作貼上到剪貼簿實例代碼分享

本文主要和大家分享JS實作貼上到剪貼簿實例程式碼，目前常見的實作貼到剪貼簿主要有以下兩種方法，希望能幫助大家。

第三方函式庫clipboard
原生JS, 主要是document.execCommand方法
第一種方法依照文件說明，設定觸發元素的data-clipboard-text 或data-clipboard- target即可，不做說明，詳見文件

第二種方法：
document.execCommand

這個方法的相容性其實不算很好，特別是行動端，具體這裡有, 但clipboard針對部分機型也有問題，所以具體使用還是得看情況， 使用該方法前要先看瀏覽器是否支援bool = document.execCommand('copy')

#MDN對上述方法的解釋如下：

當一個HTML文件切換到設計模式designMode時，文件物件暴露execCommand 方法，該方法允許執行命令來操縱可編輯區域的內容。

注意加粗部分，設計模式，即：使用前我們需切換文檔模式為設計模式

document.designMode = 'on'

完成運行命令之後再設定值為off
還有個加粗部分，可編輯區域，預設的input和textarea元素是可編輯(設定一個元素的contenteditable=”true」也可啟動元素的編輯模式)

先來看表單元素如何實作

ele.addEventListener('click', () => {    document.designMode = 'on'
    let bool = document.execCommand('copy')    if (!bool) {
        alert('sorry, 手动复制吧')
    } else {        let val = 'something'
        let inputEle = document.createElement('input')        document.body.appendChild(inputEle)
        inputEle.setAttribute('value', val)
        inputEle.setAttribute('readonly', 'readonly')
        inputEle.select()        document.execCommand('copy')        document.body.removeChild(inputEle)
        alert('copied')
    }    document.designMode = 'off'})

為避免出現遊標或拉起輸入法，需要給元素設定readonly屬性

inputEle.select()方法在某些瀏覽器中有時無法選取所有內容，這時需要利用inputeElement的setSelectionRange方法：

HTMLInputElement.setSelectionRange 方法可以從一個被focused 的 
元素中選取特定範圍的內容。

綜上加兩行：

...inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand('copy')...

如果不是input等表單元素，不能使用select和setSelectRange的話，那麼我們可以使用getSelection和createRange方法來模擬這個過程了，Selection物件表示使用者選擇的文字範圍或遊標的目前位置，滿足執行execComman指令的可編輯活動區域，如下

let range = document.createRange()let tar = document.querySelector('#code')
range.selectNodeContents(tar)let selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)document.execCommand('copy')
selection.removeAllRanges()

上述針對非input，textarea等表單元素也能實現了
原文連結：segmentfault. com
詳細文章：https://github.com/axuebin/articles/issues/26

目前常見的實作貼上到剪貼簿主要有以下兩種方法：

第三方庫clipboard
原生JS, 主要是document.execCommand方法
第一種方法按照文件說明，設定觸發元素的data-clipboard-text 或者data-clipboard-target即可，不做說明，詳見文件

第二種方法：
document.execCommand

這個方法的兼容性其實不算很好，特別是行動端，具體這裡有, 但clipboard針對部分機型也有問題，所以具體使用還是得看情況， 使用該方法前要先看瀏覽器是否支援bool = document.execCommand('copy')

MDN對上述方法的解釋如下：

當一個HTML文件切換到設計模式designMode時，文件物件暴露execCommand 方法，該方法允許執行命令來操縱可編輯區域的內容。

注意加粗部分，設計模式，即：使用前我們需切換文檔模式為設計模式

document.designMode = 'on'

完成運行命令之後再設定值為off
還有個加粗部分，可編輯區域，預設的input和textarea元素是可編輯(設定一個元素的contenteditable=”true」也可啟動元素的編輯模式)

先來看表單元素如何實作

ele.addEventListener('click', () => {    document.designMode = 'on'
    let bool = document.execCommand('copy')    if (!bool) {
        alert('sorry, 手动复制吧')
    } else {        let val = 'something'
        let inputEle = document.createElement('input')        document.body.appendChild(inputEle)
        inputEle.setAttribute('value', val)
        inputEle.setAttribute('readonly', 'readonly')
        inputEle.select()        document.execCommand('copy')        document.body.removeChild(inputEle)
        alert('copied')
    }    document.designMode = 'off'})

為避免出現遊標或拉起輸入法，需要給元素設定readonly屬性

inputEle.select()方法在某些瀏覽器中有時無法選取所有內容，這時需要利用inputeElement的setSelectionRange方法：

HTMLInputElement.setSelectionRange 方法可以從一個被focused 的 
元素中選取特定範圍的內容。

綜上加兩行：

...inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand('copy')...

如果不是input等表單元素，不能使用select和setSelectRange的話，那麼我們可以使用getSelection和createRange方法來模擬這個過程了，Selection物件表示使用者選擇的文字範圍或遊標的目前位置，滿足執行execComman指令的可編輯活動區域，如下

let range = document.createRange()let tar = document.querySelector('#code')
range.selectNodeContents(tar)let selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)document.execCommand('copy')
selection.removeAllRanges()

上述針對非input，textarea等表單元素也能實現了
相關推薦：

JavaScript複製內容到剪貼簿實現代碼

JS操作剪貼簿代碼分享

JavaScript實作複製到剪貼板的方法總結

以上是JS實作貼上到剪貼簿實例代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！