1. 程式人生 > >Chrome瀏覽器讀寫系統剪切板

Chrome瀏覽器讀寫系統剪切板

覆蓋 執行c 對象 但是 https document 找到 pan tps

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

Chrome瀏覽器讀寫系統剪切板