原生JS實現粘貼到剪貼板

Pikachu 發布于2019-08-22 15:06 / 2967人閱讀

摘要：綜上加兩行如果不是等表單元素，不能使用和的話，那么我們可以使用和方法來模擬這個過程了，對象表示用戶選擇的文本范圍或光標的當前位置，滿足執行命令的可編輯活動區域，如下上述針對非，等表單元素也能實現了

本文主要討論原生方法

目前常見的實現粘貼到剪貼板主要有以下兩種方法：

第三方庫 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等表單元素也能實現了

云服務器 GPU云服務器 js復制到剪貼板 js復制到粘貼板原生js實現 ajax原生js實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93173.html

使用clipboard實現前端頁面復制到粘貼板的功能

摘要：最近公司需要做一個實現復制的功能，本來以為會是很簡單兩三行代碼的事，后來發現網上說的那些原生實現復制的方法很多瀏覽器因為安全的原因都不支持了，嘗試了很長時間，還是死心了，決定使用第三方的庫。最近公司需要做一個js實現復制的功能，本來以為會是很簡單兩三行js代碼的事，后來發現網上說的那些原生js實現復制的方法很多瀏覽器因為安全的原因都不支持了，嘗試了很長時間，還是死心了，決定使用第三方...

Astrian 2019-08-21 16:01 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

DevTalking 2019-08-02 11:11 評論0 收藏0
前端培訓-初級階段-場景實戰（2019-05-09）-聊天框-發送框

摘要：初級階段已經完結，之后會針對之前提到過的內容，對實際場景進行分享。我們要講什么聊天功能中的發送框的實現及一些常規操作的實現。以下接口都從繼承其方法和屬性返回一個包含該節點名字的。是獲取剪貼板對象。所以不能直接人為替換剪貼板內容達到目的。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（H...

wuyangchun 2019-08-02 16:17 評論0 收藏0