js?剪切、復制、粘貼功能實現(xiàn)
針對現(xiàn)代瀏覽器實現(xiàn)(Navigator.clipboard)
Navigator.clipboard API可以用來訪問系統(tǒng)剪貼板,可以實現(xiàn)【剪切、復制、粘貼】功能。該 API 被設計用來取代使用 document.execCommand() 的剪貼板訪問方式,不兼容 IE。
使用 Navigator.clipboard API時會彈出用戶授權(quán)彈窗。如果用戶沒有授予權(quán)限,則不允許讀取或更改剪貼板內(nèi)容。
let clipBoard = navigator.clipboard;
// 寫入文本至操作系統(tǒng)剪貼板
clipBoard.writeText('你好').then(() => {
this.$message.success('復制成功!')
})
// 寫入任意數(shù)據(jù)(比如圖片)至操作系統(tǒng)剪貼板用 clipBoard.write()
// 從剪貼板讀取文本
clipBoard.readText().then(clipText => {
console.log(clipText);
})
// 從剪貼板讀取數(shù)據(jù)(比如圖片)用 clipBoard.read()針對舊版本瀏覽器實現(xiàn)(document.execCommand)
document.execCommand 針對可編輯內(nèi)容區(qū)域提供了很多有用的 API,包括其中的【剪切、復制、粘貼】功能。
MDN 寫到 document.execCommand 方法已廢棄。
document.execCommand 的復制有個前提,必須先選中內(nèi)容,但有時候我們要實現(xiàn)的效果是沒有選中這個動作的,比如在手機號后面有個“復制”按鈕,點擊按鈕就直接復制了手機號,這里我們有2種方法實現(xiàn):
方法1:在 body 動態(tài)追加一個隱藏的文本域,再用 select() 方法選中里面的內(nèi)容,接著 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 事件,在事件回調(diào)里添加要復制的內(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('復制成功!');
},剪切、復制、粘貼事件
可以給元素綁定 cut、copy、paste 事件監(jiān)聽剪切、復制、粘貼行為。
// 可以監(jiān)聽 cut 事件對剪切內(nèi)容進行修改
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 剪切、復制、粘貼功能實現(xiàn)的文章就介紹到這了,更多相關js 剪切、復制、粘貼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
優(yōu)化 JavaScript 代碼的方法小結(jié)
客戶端腳本能讓你的應用更加地動態(tài)和活躍, 但是瀏覽器對代碼的解析可能造成效率問題, 而這種性能差異在客戶端之間也不盡相同。 這里我們討論和給出一些優(yōu)化你的 JavaScript 代碼的提示和最佳實踐。2009-07-07
一文讓你徹底弄懂js中undefined和null的區(qū)別
JavaScript是一門動態(tài)類型語言,元素除了表示存在的空值外,還有可能根本就不存在,這就是undefined存在的原因,這篇文章主要給大家介紹了關于undefined和null區(qū)別的相關資料,需要的朋友可以參考下2022-03-03
Canvas?drawImage方法實現(xiàn)圖片壓縮詳解
這篇文章主要為大家介紹了Canvas?drawImage方法實現(xiàn)圖片壓縮詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11

