成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

原生JS實現(xiàn)粘貼到剪貼板

Pikachu / 2975人閱讀

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

本文主要討論原生方法

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

第三方庫 clipboard

原生JS, 主要是 document.execCommand方法

第一種方法按照文檔說明，設(shè)置觸發(fā)元素的data-clipboard-text 或者 data-clipboard-target即可，不做說明，詳見文檔

第二種方法：
document.execCommand

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

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

當(dāng)一個HTML文檔切換到設(shè)計模式 designMode時，文檔對象暴露 execCommand 方法，該方法允許運行命令來操縱可編輯區(qū)域的內(nèi)容。

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

document.designMode = "on"

完成運行命令之后再設(shè)置值為off
還有個加粗部分，可編輯區(qū)域 ，默認(rèn)的input和textarea元素是可編輯(設(shè)置一個元素的contenteditable="true"也可激活元素的編輯模式)

先來看表單元素如何實現(xiàn)

ele.addEventListener("click", () => {
    document.designMode = "on"
    let bool = document.execCommand("copy")
    if (!bool) {
        alert("sorry, 手動復(fù)制吧")
    } 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"
})

為避免出現(xiàn)光標(biāo)或者拉起輸入法，需要給元素設(shè)置readonly屬性

inputEle.select()方法在一些瀏覽器中有時不能選中所有內(nèi)容，這時需要利用inputeElement的setSelectionRange方法：

HTMLInputElement.setSelectionRange 方法可以從一個被 focused 的 
元素中選中特定范圍的內(nèi)容。

綜上加兩行：

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

如果不是input等表單元素，不能使用select和setSelectRange的話，那么我們可以使用getSelection和createRange方法來模擬這個過程了，Selection對象表示用戶選擇的文本范圍或光標(biāo)的當(dāng)前位置，滿足執(zhí)行execComman命令的可編輯活動區(qū)域，如下

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等表單元素也能實現(xiàn)了

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93173.html

相關(guān)文章

  • 使用clipboard實現(xiàn)前端頁面復(fù)制到粘貼板的功能

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

    Astrian 評論0 收藏0

  • 前端er怎樣操作剪切復(fù)制以及禁止復(fù)制+破解等

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

    mikasa 評論0 收藏0

  • 前端er怎樣操作剪切復(fù)制以及禁止復(fù)制+破解等

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

    amuqiao 評論0 收藏0

  • 前端er怎樣操作剪切復(fù)制以及禁止復(fù)制+破解等

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

    DevTalking 評論0 收藏0

  • 前端培訓(xùn)-初級階段-場景實戰(zhàn)（2019-05-09）-聊天框-發(fā)送框

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

    wuyangchun 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<