API介紹:
複製、剪切、粘貼事件：
copy 發生複製操作時觸發;
cut 發生剪切操作時觸發;
paste 發生粘貼操作時觸發;
每個事件都有一個before事件對應：beforecopy、beforecut、beforepaste;
這幾個before一般不怎麼用，所以我們把注意力放在另外三個事件就可以了。
觸發條件:
鼠標右鍵菜單的複製、粘貼、剪切;
使用了相應的鍵盤組合鍵，比如:command+c、command+v;
就算你是隨便按的，也會觸發事件。高程中介紹在Chorme、Firefox和Safari中，這幾個before事件只會在真實會發生剪貼板事件的情況下觸發，IE上則可以觸發before。我實際測試的時候最新版chorme也會亂按也會觸發，所以限制應該是在早一點的版本上。
so 想說的是：before這幾個事件最好不要用,有關於剪切板的處理最好放在copy、cut、paste上面。
使用姿勢：
以copy爲例:
document.body.oncopy = e => {
// 監聽全局複製 做點什麼
}
// 還有這種寫法：
document.addEventListener("copy", e => {
// 監聽全局複製 做點什麼
});
複製代碼
上面是在document.body上全局監聽的，然而很多人不知道的是，我們還可以爲某些dom單獨添加剪切板事件：
// html結構
<div id="test1"></div>
<div id="test2"></div>
// 寫法一樣：
let test1 = document.querySelector('#test1');
test1.oncopy = e => {
// 監聽test1發生的複製事件 做點什麼
// test1發生的複製事件會觸發回調，其他地方不會觸發回調
}
複製代碼
其他事件也是一樣的，這裏就不贅述了。
clipboardData對象:用於訪問以及修改剪貼板中的數據
兼容：
不同瀏覽器，所屬的對象不同：在IE中這個對象是window對象的屬性，在Chrome、Safari和Firefox中，這個對象是相應的event對象的屬性。所以我們在使用的時候，需要做一下如下兼容:
document.body.oncopy = e => {
let clipboardData = (e.clipboardData || window.clipboardData);
// 獲取clipboardData對象 + do something
}
複製代碼
對象方法：
對象有三個方法: getData()、setData()、clearData()
getData() 訪問剪切板中的數據
參數： getData()接受一個'text'參數，即要取得的數據的格式。
在複製、剪切、粘貼觸發的事件的數據：
實際上在chorme上測試只有paste粘貼的時候才能用getData()訪問到數據，用法如下：
要粘貼的數據：
document.body.onpaste = e => {
let clipboardData = (e.clipboardData || window.clipboardData); // 兼容處理
console.log('要粘貼的數據', clipboardData.getData('text'));
}
複製代碼
被複制/剪切的數據：
在複製和剪切中的數據，需要通過window.getSelection(0).toString()來訪問:
document.body.oncopy = e => {
console.log('被複制的數據:', window.getSelection(0).toString());
}
複製代碼
setData(): 修改剪切板中的數據
參數：第一個參數也是'text'，第二個參數是要放在剪切板中的文本。
剩下的留在下面仿知乎/掘金複製大段文本添加版權信息那裏再說。
clearData() :
這個方法就不太知道了，試了好久不知道怎麼用(如果有大佬知道，可以在評論區指點一下)。
如果只是爲了禁止複製，或者禁止粘貼，在下面還有另外的方法可以做到，並且可以細粒化操作。
應用:
如果學習不是爲了裝X，那麼一切將毫無意義，來看這個東西可以在哪些場景使用：
實現類知乎/掘金複製大段文本添加版權信息:
實現很簡單：取消默認複製之後，主要是在被複制的內容後面添加信息，然後根據clipboardData的setData()方法將信息寫入剪貼板。
可以直接複製這段代碼到本地去試試。
// 掘金這裏不是全局監聽，應該只是監聽文章的dom範圍內。
document.body.oncopy = event => {
event.preventDefault(); // 取消默認的複製事件
let textFont, copyFont = window.getSelection(0).toString(); // 被複制的文字 等下插入
// 防知乎掘金 複製一兩個字則不添加版權信息 超過一定長度的文字 就添加版權信息
if (copyFont.length > 10) {
textFont = copyFont + '\n'
- '作者：OBKoro1\n'
- '鏈接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts\n'
- '來源：掘金\n'
- '著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。';
} else {
textFont = copyFont; // 沒超過十個字 則採用被複制的內容。
}
if (event.clipboardData) {
return event.clipboardData.setData('text', textFont); // 將信息寫入粘貼板
} else {
// 兼容IE
return window.clipboardData.setData("text", textFont);
}
}
複製代碼
然後command+c、command+v，輸出:
你複製的內容
作者：OBKoro1
鏈接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts
來源：掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
複製代碼
實現類起點網的防複製功能:
禁止複製+剪切
禁止右鍵，右鍵某些選項:全選，複製，粘貼等。
禁用文字選擇，能選擇卻不能複製，體驗很差。
user-select 用css禁止選擇文本。
可以把代碼拷到本地玩一玩：
// 禁止右鍵菜單
document.body.oncontextmenu = e => {
console.log(e, '右鍵');
return false;
// e.preventDefault();
};
// 禁止文字選擇。
document.body.onselectstart = e => {
console.log(e, '文字選擇');
return false;
// e.preventDefault();
};
// 禁止複製
document.body.oncopy = e => {
console.log(e, 'copy');
return false;
// e.preventDefault();
}
// 禁止剪切
document.body.oncut = e => {
console.log(e, 'cut');
return false;
// e.preventDefault();
};
// 禁止粘貼
document.body.onpaste = e => {
console.log(e, 'paste');
return false;
// e.preventDefault();
};
// css 禁止文本選擇 這樣不會觸發js
body {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
複製代碼
PS：
使用e.preventDefault()也可以禁用，但建議使用return false這樣就不用去訪問e和e的方法了。
示例中document.body全局都禁用了，也可以對dom(某些區域)進行禁用。
破解防複製：
上面的防複製方法通過js+css實現的，所以思路就是：禁用js+取消user-select樣式。
Chrome瀏覽器的話：打開瀏覽器控制檯，按F1進入Setting，勾選Disable JavaScript(禁止js)。
此時如果還不能複製的話，就要去找user-select樣式,取消這個樣式就可以了。
所以那些盜版小說手打的，我真的不太能理解，Excuse me？？？
點擊複製功能：
不能使用clipboardData：
在IE中可以用window.clipboardData.setData('text','內容')實現。
上文提到過，在IE中clipboardData是window的屬性。
而其他瀏覽器則是相應的event對象的屬性，這實際上是一種安全措施，防止未經授權的訪問,爲了兼容其他瀏覽器，所以我們不能通過clipboardData來實現這種操作。
具體做法：
創建一個隱藏的input框
點擊的時候，將要複製的內容放進input框中
選擇文本內容input.select()
這裏只能用input或者textarea才能選擇文本。
document.execCommand("copy")，執行瀏覽器的複製命令。
function copyText() {
var text = document.getElementById("text").innerText; // 獲取要複製的內容也可以傳進來
var input = document.getElementById("input"); // 獲取隱藏input的dom
input.value = text; // 修改文本框的內容
input.select(); // 選中文本
document.execCommand("copy"); // 執行瀏覽器複製命令
alert("複製成功");
}
dome---實例
<div class="wrapper">
<p id="text">我把你當兄弟你卻想着複製我？</p>
<input id="input">
<button onclick="copyText()">copy</button>
</div>
.wrapper {position: relative;}
#input {
position:absolute;
top:-10000px;
opacity: 0;
z-inde:-10;
}
function copyText() {
var text = document.getElementById("text").innerText;
var input = document.getElementById("input");
input.value = text; // 修改文本框的內容
input.select(); // 選中文本
document.execCommand("copy"); // 執行瀏覽器複製命令
alert("複製成功");
}