Chrome瀏覽器讀寫系統剪切板

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             }

 

參考：

http://www.alloyteam.com/2015/04/how-to-paste-zhuangbility/  

https://ruby-china.org/topics/17266

http://www.cnblogs.com/beileixinqing/p/7484883.html