?2016-2026 Matools All rights reserved,
粵ICP備17059708號
不少技術(shù)博客有這樣的處理，當我們復制代碼的時候，會自動加上一段本信息版權(quán)為XXXX，這是怎么實現(xiàn)的呢？
其實實現(xiàn)的方式很簡單，可以在我的網(wǎng)站頁面上綁定一個copy事件，當你復制文章內(nèi)容的時候，自動在剪切板文字后面加上一段版權(quán)聲明。
?
我這邊是沒有加這些的，代碼什么的想復制就復制好了。大家都是靠代碼技能吃飯的，可以體會寫代碼的不易，相信一定會尊重知識勞動成果——保留出處等版權(quán)信息的。
?
效果示例 :
?
?
?
代碼示例：
<body> <p>是的你沒有看錯, 我還是在路邊吃快餐, 在北京市的三里屯, 在上海市的外灘</p> </body> <script> //
監(jiān)聽整個網(wǎng)頁的copy(復制)事件 document.addEventListener('copy', function (event) { //
clipboardData 對象是為通過編輯菜單、快捷菜單和快捷鍵執(zhí)行的編輯操作所保留的，也就是你復制或者剪切內(nèi)容 let clipboardData =
event.clipboardData || window.clipboardData; // 如果未復制或者未剪切，則return出去 if
(!clipboardData) {return; } // Selection 對象，表示用戶選擇的文本范圍或光標的當前位置。 // 聲明一個變量接收 --
用戶輸入的剪切或者復制的文本轉(zhuǎn)化為字符串 let text = window.getSelection().toString(); if (text) { //
如果文本存在，首先取消文本的默認事件 event.preventDefault(); // 通過調(diào)用常clipboardData對象的
setData(format, data) 方法；來設置相關(guān)文本// setData(format, data);參數(shù) // format //
一個DOMString 表示要添加到 drag object的拖動數(shù)據(jù)的類型。// data // 一個 DOMString表示要添加到 drag
object的數(shù)據(jù)。 clipboardData.setData('text/plain', text + '\n\n張無忌 版權(quán)所有'); } });
</script>
?
以上代碼相關(guān)參數(shù)詳解：
?
element.addEventListener(type, handle, false);
type: 事件觸發(fā)類型，如click,keypress等等，下面我們詳細的講講事件類型??！
handle:事件處理函數(shù)，事件出發(fā)后，定義可能發(fā)生的變化?。?br>
false: 表示事件冒泡模型，一般來說都是false。
?
?
clipboardData
clipboardData?屬性保存了一個?DataTransfer?對象（用戶剪切板的內(nèi)容），這個對象可用于：
format數(shù)據(jù)類型有：text/plain，text/uri-list。data表示要添加到剪切板的數(shù)據(jù)。
* 描述哪些數(shù)據(jù)可以由?cut <>?和?copy <>?事件處理器放入剪切板，通常通過調(diào)用?setData(format,
方法；設置拖放操作的數(shù)據(jù)（剪切板的數(shù)據(jù)）到指定的數(shù)據(jù)和類型。
* 獲取由?paste <>?事件處理器拷貝進剪切板的數(shù)據(jù)，通常通過調(diào)用?getData(format)?方法
?
?
?
event.preventDefault() 方法阻止元素發(fā)生默認的行為。
例如：
* 當點擊提交按鈕時阻止對表單的提交
* 阻止以下 URL 的鏈接
?
?
?
?
?
?
如果有任何疑問即可留言反饋，會在第一時間回復反饋，謝謝大家
熱門工具 換一換