當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端js常用剪贴板(复制粘贴)操作和应用，以及navigator.clipboard新粘贴板API使用

發布時間：2023/12/16 HTML 39 豆豆

生活随笔收集整理的這篇文章主要介紹了前端js常用剪贴板(复制粘贴)操作和应用，以及navigator.clipboard新粘贴板API使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近的項目上需要做復制粘貼相關的操作，來總結下吧

復制、剪切、粘貼事件：

copy 發生復制操作時觸發;
cut 發生剪切操作時觸發;
paste 發生粘貼操作時觸發;

每個事件都有一個 before 事件對應：beforecopy、beforecut、beforepaste;
這幾個 before 一般不怎么用，所以我們把注意力放在三個事件就可以了。

觸發條件:

鼠標右鍵菜單的復制、粘貼、剪切;

使用了相應的鍵盤組合鍵，比如:ctrl+c、ctrl+v;

復制操作：

copy事件使用示例：

<body>gggwgzgf </body> <script type="text/javascript">document.body.oncopy = e => {// 監聽全局復制做點什么console.log(e)}; </script>

我們可以看到事件對象中的屬性：

我們主要研究的是里面的clipboardData屬性對象

clipboardData 對象: 用于訪問以及修改剪貼板中的數據
clipboardData對象中有兩個方法：

getData():常配合copy事件使用，用于設置到剪貼板中的值
setData():常配合paste事件使用，用于獲取設置到剪貼板中的值

兼容：

不同瀏覽器，所屬的對象不同：在 IE
中這個對象是window對象的屬性，在Chrome、Safari和Firefox中，這個對象是相應的event對象的屬性。所以我們在使用的時候，需要做一下如下兼容:

document.body.oncopy = e => {let clipboardData = e.clipboardData || window.clipboardData;// 獲取clipboardData對象 + do something };

copy配合getSelection實現復制某段文本：

<body>gggwgzgf</body><script type="text/javascript">document.body.oncopy = e => {console.log(window.getSelection().toString())let copyMsg = window.getSelection().toString()//把值設置到剪貼板中，方便paste事件觸發去拿e.clipboardData.setData("Text", copyMsg);};</script>

為了方便，這次，我直接使用ctrl+c測試了

注意：window.getSelection().toString()我是調用toString()方法轉成文本的，如果不調用這個方法，直接通過window.getSelection()取到值存到剪貼板會有出奇的效果，后面會說到，需要配合paste事件

粘貼paste事件

使用示例：

<body>gggwgzgf<input placeholder="這里存放粘貼操作的值" /></body><script type="text/javascript">document.body.oncopy = e => {console.log(window.getSelection().toString())let copyMsg = window.getSelection().toString()e.clipboardData.setData("Text", copyMsg);};document.body.onpaste=function(e){var data = e.clipboardData.getData("Text")document.querySelector("input").value = data}</script>

到這里，你可能有個疑問，只能復制粘貼文本嗎，圖片可以嗎？
這是可以的。

通過patse事件獲取剪切板中的圖片：

解釋： 當粘貼事件觸發時遍歷剪切版對象（clipboardData）中的所有items，找到類型為圖片的item并調用getAsFile方法得到文件對象

拿到file 對象后我們有幾種選擇：

通過fileReader得到文件對象的base64字符串

var reader = new FileReader(); reader.onload = function(e){ // 通過e.target.result取到base64然后上傳 // 作為src設到image標簽上預覽 } reader.readAsDataURL(file); //此處的file為上面得到的文件對象```

通過formData文件對象轉換為二進制數據

var formData = new FormData(); formData.append('file', file);

通過 URL.createObjectURL轉成url地址預覽

var blobUrl=URL.createObjectURL(file)

示例代碼：

<body><img src="" id="imgTest" /></body><script type="text/javascript">document.addEventListener('paste', function(event) {var items = (event.clipboardData && event.clipboardData.items) || [];var file = null;if(items && items.length) {for(var i = 0; i < items.length; i++) {if(items[i].type.indexOf('image') !== -1) {file = items[i].getAsFile();break;}}}var blobUrl = URL.createObjectURL(file);document.getElementById("imgTest").src = blobUrl;});</script>

局限性：
對于qq，微信等的截圖或者按print screen得到的截圖，還有任意網頁的右擊復制圖片都能完美支持，但是，對于電腦本地圖片文件的復制沒辦法從剪切版獲取到

進階用法：

配合window.getSelection()，文字圖片混合復制粘貼：

<body><span>gegegseraw</span><img src="a1.png" width="100" /><hr />下面為粘貼區域：<div></div></body><script type="text/javascript">document.body.oncopy = function(e) { let copyMsg = window.getSelection()e.clipboardData.setData("Text", copyMsg);}document.body.addEventListener('paste', function(event) {var data = (event.clipboardData && event.clipboardData.items) || [];console.log(data)let div = document.querySelector("div")for(var i = 0; i < data.length; i += 1) {if((data[i].kind == 'string') &&(data[i].type.match('^text/plain'))) {// This item is the target nodeconsole.log("... Drop:plain")} else if((data[i].kind == 'string') &&(data[i].type.match('^text/html'))) {// Drag data item is HTMLdata[i].getAsString(function(s) {div.innerHTML = s});console.log("... Drop: HTML");} else if((data[i].kind == 'string') &&(data[i].type.match('^text/uri-list'))) {// Drag data item is URIconsole.log("... Drop: URI");} else if((data[i].kind == 'file') &&(data[i].type.match('^image/'))) {// Drag data item is an image fileconsole.log("... Drop: File ");}}});</script>

效果：

navigator.clipboard介紹：

異步剪貼板 API 是一個相對較新的 API，瀏覽器仍在逐漸實現它。由于潛在的安全問題和技術復雜性，大多數瀏覽器正在逐步集成這個 API。剪貼板 Clipboard API 為 Navigator 接口添加了只讀屬性 clipboard，該屬性返回一個可以讀寫剪切板內容的 Clipboard 對象。在 Web 應用中，剪切板 API 可用于實現剪切、復制、粘貼的功能。

系統剪貼板暴露于全局屬性 Navigator.clipboard 之中，Navigator.clipboard對象中有四個常用方法：都是異步的

read()：從剪貼板讀取數據（比如圖片），返回一個 Promise 對象。
readText()：從操作系統讀取文本，返回一個 Promise 對象。
write()：寫入任意數據至操作系統剪貼板，返回一個 Promise 對象。
writeText()：寫入文本至操作系統剪貼板，返回一個 Promise 對象。

注意：只有在用戶事先授予網站或應用對剪切板的訪問許可之后，才能使用異步剪切板讀寫方法。許可操作必須通過取得權限 Permissions API 的 "clipboard-read" 和/或 "clipboard-write" 項獲得。

使用實例：

復制writeText()：

navigator.clipboard.writeText('要復制的文本').then(() => {console.log('文本已經成功復制到剪切板');}).catch(err => {// 如果用戶沒有授權，則拋出異常console.error('無法復制此文本：', err);});

async，await優化寫法：

async function copyPageUrl() {try {await navigator.clipboard.writeText(location.href);console.log('Page URL copied to clipboard');} catch (err) {console.error('Failed to copy: ', err);} }

粘貼readText()：

navigator.clipboard.readText().then(text => {console.log('Pasted content: ', text);}).catch(err => {console.error('Failed to read clipboard contents: ', err);});

同理也可寫成async，await

write()寫入數據/圖片：

function setClipboard(text) {let data = new DataTransfer();data.items.add("text/plain", text);navigator.clipboard.write(data).then(function() {/* success */}, function() {/* failure */}); }

代碼創建了一個 DataTransfer 對象，要替換的內容存儲在這里。執行 DataTransferItemList.add() 將數據寫入進去，然后執行 write() 方法，指定執行成功或錯誤的結果。

read()讀取數據/圖片：

navigator.clipboard.read().then(data => {for (let i=0; i<data.items.length; i++) {if (data.items[i].type != "text/plain") {alert("Clipboard contains non-text data. Unable to access it.");} else {textElem.innerText = data.items[i].getAs("text/plain");}}});

應用:

實現類知乎/掘金復制大段文本添加版權信息:

<body><span>0123456789abcdefg</span><hr /> 下面為粘貼區域：<div></div></body><script type="text/javascript">document.body.oncopy = event => {event.preventDefault(); // 取消默認的復制事件let textFont = nulllet copyFont = window.getSelection().toString(); // 被復制的文字等下插入// 防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息if(copyFont.length > 10) {textFont =`內容: ${copyFont} 作者：codingWeb 鏈接：https://blog.csdn.net/fesfsefgs來源：csdn 著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。`} else {textFont = copyFont; // 沒超過十個字則采用被復制的內容。}event.clipboardData.setData('text', textFont); // 將信息寫入粘貼板};document.body.onpaste = function(event) {var data = event.clipboardData.getData("text")document.querySelector("div").innerHTML = data}</script>

實現類起點網的防復制功能:

禁止復制+剪切

禁止右鍵，右鍵某些選項:全選，復制，粘貼等。

禁用文字選擇，能選擇卻不能復制，體驗很差。

user-select 用 css 禁止選擇文本。

// 禁止右鍵菜單 document.body.oncontextmenu = e => {console.log(e, '右鍵');return false;// e.preventDefault(); }; // 禁止文字選擇。 document.body.onselectstart = e => {console.log(e, '文字選擇');return false;// e.preventDefault(); }; // 禁止復制 document.body.oncopy = e => {console.log(e, 'copy');return false;// e.preventDefault(); } // 禁止剪切 document.body.oncut = e => {console.log(e, 'cut');return false;// e.preventDefault(); }; // 禁止粘貼 document.body.onpaste = e => {console.log(e, 'paste');return false;// e.preventDefault(); }; // css 禁止文本選擇這樣不會觸發js body {user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; }

提示： 使用e.preventDefault()也可以禁用，示例中document.body全局都禁用了，也可以對 dom(某些區域)進行禁用。

點擊復制功能：

不能使用 clipboardData：

在 IE 中可以用window.clipboardData.setData('text','內容')實現。因為，在 IE
中clipboardData是window的屬性。而其他瀏覽器則是相應的event對象的屬性，這實際上是一種安全措施，防止未經授權的訪問,為了兼容其他瀏覽器，所以我們不能通過clipboardData來實現這種操作。

具體做法：

創建一個隱藏的input框

點擊的時候，將要復制的內容放進input框中

選擇文本內容input.select()

這里只能用input或者textarea才能選擇文本。

document.execCommand(“copy”)，執行瀏覽器的復制命令。

示例：

<body><button>#aaaaaa</button><button>#bbbbbb</button><button>#ffffff</button><input /></body><script type="text/javascript">function copyText(e) {var text = e.target.innerHTML; // 獲取要復制的內容也可以傳進來var input = document.querySelector('input'); // 獲取隱藏input的dominput.value = text; // 修改文本框的內容input.select(); // 選中文本document.execCommand('copy'); // 執行瀏覽器復制命令console.log('復制成功');}document.body.onclick=copyText</script>

擴展：

如果不通過手動點擊元素觸發click事件，代碼控制，我們都知道，可以使用dom.click()觸發一次點擊操作
那別的事件也可以通過代碼控制觸發嗎？
答案是可以的

事件模擬：

function trigger(el,type){let ev = document.createEvent("HTMLEvents")ev.initEvent(type,true,true)el.dispatchEvent(ev)}

使用：

trigger(domEle,"copy") trigger(domEle,"paste")

鍵盤模擬：

let mockKeyboardEvent = new KeyboardEvent('keyup', { shiftKey: true, keyCode: 49 })document.dispatchEvent(mockKeyboardEvent)

鼠標模擬：

let mockClickEvent = new MouseEvent('click', {...}); document.dispatchEvent(mockClickEvent);

自定義事件模擬:(推薦)

//綁定document.body.onpaste = function (e) {console.log(e)} //觸發,攜帶自定義參數let myEvent = new CustomEvent('paste', {detail: {username: 'aaaaaaa',password: '11111111'}})document.body.dispatchEvent(myEvent)

總結

以上是生活随笔為你收集整理的前端js常用剪贴板(复制粘贴)操作和应用，以及navigator.clipboard新粘贴板API使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java short =_java sh
下一篇： Google chrome浏览器快捷方式