js?剪切、復(fù)制、粘貼功能實(shí)現(xiàn)
針對(duì)現(xiàn)代瀏覽器實(shí)現(xiàn)(Navigator.clipboard)
Navigator.clipboard API可以用來(lái)訪問(wèn)系統(tǒng)剪貼板,可以實(shí)現(xiàn)【剪切、復(fù)制、粘貼】功能。該 API 被設(shè)計(jì)用來(lái)取代使用 document.execCommand() 的剪貼板訪問(wèn)方式,不兼容 IE。
使用 Navigator.clipboard API時(shí)會(huì)彈出用戶授權(quán)彈窗。如果用戶沒有授予權(quán)限,則不允許讀取或更改剪貼板內(nèi)容。
let clipBoard = navigator.clipboard; // 寫入文本至操作系統(tǒng)剪貼板 clipBoard.writeText('你好').then(() => { this.$message.success('復(fù)制成功!') }) // 寫入任意數(shù)據(jù)(比如圖片)至操作系統(tǒng)剪貼板用 clipBoard.write() // 從剪貼板讀取文本 clipBoard.readText().then(clipText => { console.log(clipText); }) // 從剪貼板讀取數(shù)據(jù)(比如圖片)用 clipBoard.read()
針對(duì)舊版本瀏覽器實(shí)現(xiàn)(document.execCommand)
document.execCommand 針對(duì)可編輯內(nèi)容區(qū)域提供了很多有用的 API,包括其中的【剪切、復(fù)制、粘貼】功能。
MDN 寫到 document.execCommand 方法已廢棄。
document.execCommand 的復(fù)制有個(gè)前提,必須先選中內(nèi)容,但有時(shí)候我們要實(shí)現(xiàn)的效果是沒有選中這個(gè)動(dòng)作的,比如在手機(jī)號(hào)后面有個(gè)“復(fù)制”按鈕,點(diǎn)擊按鈕就直接復(fù)制了手機(jī)號(hào),這里我們有2種方法實(shí)現(xiàn):
方法1:在 body 動(dòng)態(tài)追加一個(gè)隱藏的文本域,再用 select() 方法選中里面的內(nèi)容,接著 document.execCommand('copy') 進(jìn)行復(fù)制。
function copyText (text) { $('body').append(`<textarea id="iclip-container" value="${text}">${text}</textarea>`); $('#iclip-container').select(); if (document.execCommand('copy', false, null)) { $('#iclip-container').remove(); alert('復(fù)制成功!') } }
方法2:監(jiān)聽 copy 事件,在事件回調(diào)里添加要復(fù)制的內(nèi)容。
function copyText (text) { const copy = function(event) { let clipboardData = event.clipboardData || window.clipboardData; clipboardData.setData('text/plain', text); event.preventDefault(); }; document.addEventListener('copy', copy); document.execCommand('copy'); document.removeEventListener('copy', copy); this.$message.success('復(fù)制成功!'); },
剪切、復(fù)制、粘貼事件
可以給元素綁定 cut、copy、paste 事件監(jiān)聽剪切、復(fù)制、粘貼行為。
// 可以監(jiān)聽 cut 事件對(duì)剪切內(nèi)容進(jìn)行修改 const source = document.querySelector('div.source'); source.addEventListener('cut', (event) => { const selection = document.getSelection(); event.clipboardData.setData('text/plain', selection.toString().toUpperCase()); selection.deleteFromDocument(); event.preventDefault(); });
到此這篇關(guān)于js 剪切、復(fù)制、粘貼功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)js 剪切、復(fù)制、粘貼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
直接拿來(lái)用的頁(yè)面跳轉(zhuǎn)進(jìn)度條JS實(shí)現(xiàn)
這篇文章主要為大家分享了一款直接拿來(lái)用的頁(yè)面跳轉(zhuǎn)進(jìn)度條,由javascript實(shí)現(xiàn),可以直接跳轉(zhuǎn)到相應(yīng)頁(yè)面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01js圖片延遲加載(Lazyload)三種實(shí)現(xiàn)方式
這篇文章主要介紹了js延遲加載(Lazyload)三種實(shí)現(xiàn)方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03js用于樹型結(jié)構(gòu)級(jí)聯(lián)選擇
js用于樹型結(jié)構(gòu)級(jí)聯(lián)選擇...2007-01-01javascript實(shí)現(xiàn)簡(jiǎn)單的二級(jí)聯(lián)動(dòng)
這篇文章主要介紹了javascript實(shí)現(xiàn)簡(jiǎn)單的二級(jí)聯(lián)動(dòng),非常的實(shí)用,需要的朋友可以參考下2015-03-03JavaScript本地存儲(chǔ)實(shí)現(xiàn)用戶名存儲(chǔ)案例
本文主要介紹了JavaScript本地存儲(chǔ)實(shí)現(xiàn)用戶名存儲(chǔ)案例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07在js中實(shí)現(xiàn)郵箱格式的驗(yàn)證方法(推薦)
下面小編就為大家?guī)?lái)一篇在js中實(shí)現(xiàn)郵箱格式的驗(yàn)證方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10JavaScript中動(dòng)態(tài)向表格添加數(shù)據(jù)
本文給大家分享使用原生javascript實(shí)現(xiàn)動(dòng)態(tài)向表格中添加數(shù)據(jù)的方法,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-01-01