js?剪切、復制、粘貼功能實現
針對現代瀏覽器實現(Navigator.clipboard)
Navigator.clipboard API可以用來訪問系統(tǒng)剪貼板,可以實現【剪切、復制、粘貼】功能。該 API 被設計用來取代使用 document.execCommand() 的剪貼板訪問方式,不兼容 IE。
使用 Navigator.clipboard API時會彈出用戶授權彈窗。如果用戶沒有授予權限,則不允許讀取或更改剪貼板內容。
let clipBoard = navigator.clipboard; // 寫入文本至操作系統(tǒng)剪貼板 clipBoard.writeText('你好').then(() => { this.$message.success('復制成功!') }) // 寫入任意數據(比如圖片)至操作系統(tǒng)剪貼板用 clipBoard.write() // 從剪貼板讀取文本 clipBoard.readText().then(clipText => { console.log(clipText); }) // 從剪貼板讀取數據(比如圖片)用 clipBoard.read()
針對舊版本瀏覽器實現(document.execCommand)
document.execCommand 針對可編輯內容區(qū)域提供了很多有用的 API,包括其中的【剪切、復制、粘貼】功能。
MDN 寫到 document.execCommand 方法已廢棄。
document.execCommand 的復制有個前提,必須先選中內容,但有時候我們要實現的效果是沒有選中這個動作的,比如在手機號后面有個“復制”按鈕,點擊按鈕就直接復制了手機號,這里我們有2種方法實現:
方法1:在 body 動態(tài)追加一個隱藏的文本域,再用 select() 方法選中里面的內容,接著 document.execCommand('copy') 進行復制。
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('復制成功!') } }
方法2:監(jiān)聽 copy 事件,在事件回調里添加要復制的內容。
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('復制成功!'); },
剪切、復制、粘貼事件
可以給元素綁定 cut、copy、paste 事件監(jiān)聽剪切、復制、粘貼行為。
// 可以監(jiān)聽 cut 事件對剪切內容進行修改 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(); });
到此這篇關于js 剪切、復制、粘貼功能實現的文章就介紹到這了,更多相關js 剪切、復制、粘貼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!