Chrome瀏覽器讀寫系統剪切板 - fangsmile－IT工程師數位筆記本

文章出處

IE瀏覽器支持直接讀寫剪切板內容：

1 window.clipboardData.clearData();  
2 window.clipboardData.setData('Text', 'abcd');

但是這種方式不安全，很容易泄露用戶的隱私，所以現在瀏覽器如chrome都不支持這種方式了。

讀取系統剪切板

查了很多資料，如果是粘貼系統剪切板內容，前提是先去讀取系統剪切板內容。

獲取事件對象：粘貼事件提供了一個clipboardData的屬性，如果該屬性有items屬性，那么就可以查看items中是否有圖片類型的數據了。但是不支持文件夾復制圖片word等文件，可以賦值文本文字內容和截圖內容。

         //覆蓋瀏覽器粘貼事件
        document.addEventListener('paste', function (e) {
            var clipboardData = e.clipboardData;
            if (!(clipboardData && clipboardData.items)) {//是否有粘貼內容
                return;
            }
            for (var i = 0, len = clipboardData.items.length; i < len; i++) {
                var item = clipboardData.items[i];
                if (item.kind === "string" && item.type == "text/plain") {
                    item.getAsString(function (str) {
                        // str 是獲取到的字符串,創建文本框
                        //處理粘貼的文字內容
                    })
                } else if (item.kind === "file") {//file 一般是各種截圖base64數據
                    var pasteFile = item.getAsFile();
                    // pasteFile就是獲取到的文件
                    var reader = new FileReader();
                    reader.onload = function (event) {
                        var base64Img = event.target.result;
                    }; // data url  
                    reader.readAsDataURL(pasteFile);
                }
                var copy_content = e.clipboardData.getData('text/plain');
            }
        })

寫入系統剪切板

查找到的資源都是在事件對象中直接setData，但是實際測試是沒有效果的。

e.clipboardData.setData('text/plain', defaultText);

以下提供兩種實測有效的設置方式：

1）監聽copy事件，觸發copy命令

ctrl+C監聽按鍵后如果直接設置event.clipboardData.setData 是無法生效的，必須通過觸發copy命令后寫入clipboardData。

但是要記得removeEventListener，否則影響自己應用其他地方的copy。

 1        document.addEventListener("paste", function (e) {
 2             console.log(e.clipboardData.getData("text"));
 3         });
 4         document.onkeydown = function (e) {
 5             if (e.ctrlKey && e.keyCode == 67) {//ctrl+C
 6                 function handler(event) {
 7                     event.clipboardData.setData('text/plain', "自定義復制內容");
 8                     document.removeEventListener('copy', handler, true);
 9                     event.preventDefault();
10                 }
11                 document.addEventListener('copy', handler, true);
12                 document.execCommand('copy');
13             }
14         }

2）通過將需要復制的內容賦值到文本中，將文本框內容選中，執行copy命令

  <textarea readonly id="copy_text" style="position:absolute;left:-9999px"></textarea>

 1         //復制  
 2         document.onkeydown = function (e) {
 3             if (e.ctrlKey && e.keyCode == 86) {//ctrl+V
 4                 var cloneActiveElement = "需要復制的內容";
 5                 var copyText = document.getElementById("copy_text");
 6                 copyText.innerHTML = cloneActiveElement;
 7                 copyText.readOnly = false;
 8                 copyText.select();
 9                 copyText.setSelectionRange(0, copyText.value.length);
10                 document.execCommand("copy");
11                 copyText.readOnly = true;
12             }