本文主要和大家分享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等表單元素也能實現了
相關推薦：
以上是JS實作貼上到剪貼簿實例代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
