亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Pikachu / 3061人閱讀

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

本文主要討論原生方法

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

第三方庫(kù) clipboard

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

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

第二種方法：
document.execCommand

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

MDN對(duì)上述方法的解釋如下：

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

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

document.designMode = "on"

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

先來(lái)看表單元素如何實(shí)現(xiàn)

ele.addEventListener("click", () => {
    document.designMode = "on"
    let bool = document.execCommand("copy")
    if (!bool) {
        alert("sorry, 手動(dòng)復(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()方法在一些瀏覽器中有時(shí)不能選中所有內(nèi)容，這時(shí)需要利用inputeElement的setSelectionRange方法：

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

綜上加兩行：

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

如果不是input等表單元素，不能使用select和setSelectRange的話，那么我們可以使用getSelection和createRange方法來(lái)模擬這個(gè)過(guò)程了，Selection對(duì)象表示用戶選擇的文本范圍或光標(biāo)的當(dāng)前位置，滿足執(zhí)行execComman命令的可編輯活動(dòng)區(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()

上述針對(duì)非input，textarea等表單元素也能實(shí)現(xiàn)了

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93173.html

相關(guān)文章

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

    摘要：最近公司需要做一個(gè)實(shí)現(xiàn)復(fù)制的功能，本來(lái)以為會(huì)是很簡(jiǎn)單兩三行代碼的事，后來(lái)發(fā)現(xiàn)網(wǎng)上說(shuō)的那些原生實(shí)現(xiàn)復(fù)制的方法很多瀏覽器因?yàn)榘踩脑蚨疾恢С至?，嘗試了很長(zhǎng)時(shí)間，還是死心了，決定使用第三方的庫(kù)。 最近公司需要做一個(gè)js實(shí)現(xiàn)復(fù)制的功能，本來(lái)以為會(huì)是很簡(jiǎn)單兩三行js代碼的事，后來(lái)發(fā)現(xiàn)網(wǎng)上說(shuō)的那些原生js實(shí)現(xiàn)復(fù)制的方法很多瀏覽器因?yàn)榘踩脑蚨疾恢С至?，嘗試了很長(zhǎng)時(shí)間，還是死心了，決定使用第三方...

    Astrian 評(píng)論0 收藏0

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

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

    mikasa 評(píng)論0 收藏0

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

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

    amuqiao 評(píng)論0 收藏0

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

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

    DevTalking 評(píng)論0 收藏0

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

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

    wuyangchun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<