網頁操作內容復制內容后純js實現監聽自動追加自定義內容

不少網站技術或者博客上有這樣的處理，當我們復制代碼的時候，會自動加上一段本信息版權為XXXX，這是怎么實現的呢？

其實實現的方式很簡單，可以在我的網站頁面上綁定一個copy事件，當你復制文章內容的時候，自動在剪切板文字后面加上一段版權聲明。

既然有的網站已經添加了，也可以手動刪除，其實意義不是很大，但是作為技術人員大家都是靠代碼技能吃飯的，可以體會到寫代碼的不易，相信一定會尊重知識勞動成果，保留出處等版權信息的。

效果示例：

代碼示例：

// 監聽整個網頁的copy(復制)事件

document.addEventListener('copy', function (event){

// clipboardData 對象是為通過編輯菜單、快捷菜單和快捷鍵執行的編輯操作所保留的，也就是你復制或者剪切內容

let clipboardData = event.clipboardData || window.clipboardData;

// 如果未復制或者未剪切，則return出去

if (!clipboardData) { return; }

// Selection 對象，表示用戶選擇的文本范圍或光標的當前位置。

// 聲明一個變量接收 -- 用戶輸入的剪切或者復制的文本轉化為字符串

let text = window.getSelection().toString();

if (text) {

// 如果文本存在，首先取消文本的默認事件

event.preventDefault();

// 通過調用常clipboardData對象的 setData(format, data) 方法；來設置相關文本

// setData(format, data);參數

// format

// 一個DOMString 表示要添加到 drag object的拖動數據的類型。

// data

// 一個 DOMString表示要添加到 drag object的數據。

clipboardData.setData('text/plain', text '\n\n張無忌 版權所有');

}

});

以上代碼相關參數詳解：

element.addEventListener(type,?handle,?false);

type:?事件觸發類型，如click,keypress等等，下面我們詳細的講講事件類型！！

handle:事件處理函數，事件出發后，定義可能發生的變化！！

false:?表示事件冒泡模型，一般來說都是false。

clipboardData ：

clipboardData?屬性保存了一個?DataTransfer?對象(用戶剪切板的內容)。

format數據類型有：text/plain，text/uri-list。data表示要添加到剪切板的數據。描述哪些數據可以由?cut?和?copy?事件處理器放入剪切板，通常通過調用?setData(format,方法；設置拖放操作的數據(剪切板的數據)到指定的數據和類型。

獲取由?paste?事件處理器拷貝進剪切板的數據，通常通過調用?getData(format)?方法。

event.preventDefault()?方法阻止元素發生默認的行為。

例如：1、當點擊提交按鈕時阻止對表單的提交。2、阻止以下?URL?的鏈接。

參考原文連接：https://www.cnblogs.com/zhaohongcheng/p/12208492.htm

總結

以上是生活随笔為你收集整理的html5网页怎么实现内容追加,纯js实现网页内容复制后自动追加自定义内容的全部內容，希望文章能夠幫你解決所遇到的問題。

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