JS實現復制信息到剪貼板

copy

當用戶通過瀏覽器UI啟動復制操作並響應允許的document.execCommand('copy')調用時觸發copy事件。

copy事件可作用於任何可被選中或可編輯的元素，如body、div、input、textarea等。因此，可以通過監聽函數來監聽copy事件：

document.addEventListener('copy', handler); 

可以通過window.getSelection(0).toString()獲取復制的內容。

function handler(e) { console.log(window.getSelection(0).toString()); //輸出復制內容 } 

 

當然，我們的目標不是輸出復制的內容，而是修改內容。

clipboardData.setData()

調用setData(format, data)可以修改ClipboardEvent.clipboardData 事件的默認行為

調用setData()，就可以修改剪貼板的內容，當然必須把默認事件取消（必須的，如果沒有取消復制出來的內容不會發生變化）。

  //修改handler，給復制的內容添加內容 function handler(e) { e.preventDefault(); var content = `${window.getSelection(0).toString()}\n作者：路一直在_走` ; if(e.clipboardData) { e.clipboardData.setData('text/plain', content); } else if(window.clipboardData){ return window.clipboardData.setData("text", content); } } 

如果忘記取消默認事件，結果是內容不會修改：

以下是來自MDN的介紹：

事件的默認行為與事件的來源和事件處理函數相關：
1.如果默認事件沒有取消，就復制到選區（如果有選中內容）到剪切板；
2.如果取消了默認事件，但是調用了setData()方法：就復制clipboardData的內容到到剪切板；
3.如果取消了默認行為，而且沒有調用setData()方法，就沒有任何行為。

使用

既然知道了原理，現在我們在本地把掘金的添加內容去掉。打開掘金某個頁面，在控制台輸入以下代碼：

document.addEventListener('copy', function(e) { e.preventDefault(); //原封不動的輸出 e.clipboardData.setData('text/plain', window.getSelection(0).toString()); }) 

我們已經完美的去掉掘金添加的自定義內容。

同樣，打開百度文庫（你會發現復制了之后沒內容），輸入上述代碼，可以實現復制粘貼（注意輸出的內容不會保留格式）。