前言

有時候我們經(jīng)常會碰到這些場景：玩掘金、知乎的時候復(fù)制一段文字，總是會在內(nèi)容后面加上一些版權(quán)信息，以及像小說網(wǎng)站等都有禁止選中，禁止復(fù)制這種功能，還有點擊自動復(fù)制賬號的功能。

我也經(jīng)常遇到這些場景，有時候會去想這后面到底是怎么做，周末趁著有空去研究了一下，然后發(fā)現(xiàn)這些都跟操作剪貼板有關(guān)系，并且都不難，了解一下基本都知道怎么做了，整理分享一波給大家。

個人博客了解一下：obkoro1.com

---

目錄：

• API介紹
• 實現(xiàn)類知乎/掘金復(fù)制大段文本添加版權(quán)信息
• 實現(xiàn)類起點網(wǎng)的防復(fù)制功能
• 破解防復(fù)制
• 點擊復(fù)制功能

---

API介紹:

復(fù)制、剪切、粘貼事件：

copy 發(fā)生復(fù)制操作時觸發(fā);

cut 發(fā)生剪切操作時觸發(fā);

paste 發(fā)生粘貼操作時觸發(fā);

每個事件都有一個before事件對應(yīng)：beforecopy、beforecut、beforepaste;

這幾個before一般不怎么用，所以我們把注意力放在另外三個事件就可以了。

觸發(fā)條件:

鼠標(biāo)右鍵菜單的復(fù)制、粘貼、剪切;

使用了相應(yīng)的鍵盤組合鍵，比如:command+c、command+v;

就算你是隨便按的，也會觸發(fā)事件。高程中介紹在Chorme、Firefox和Safari中，這幾個before事件只會在真實會發(fā)生剪貼板事件的情況下觸發(fā)，IE上則可以觸發(fā)before。我實際測試的時候最新版chorme也會亂按也會觸發(fā)，所以限制應(yīng)該是在早一點的版本上。

so 想說的是：before這幾個事件最好不要用,有關(guān)于剪切板的處理最好放在copy、cut、paste上面。

使用姿勢：

以copy為例:

document.body.oncopy = e => {// 監(jiān)聽全局復(fù)制 做點什么}// 還有這種寫法：document.addEventListener("copy", e => {// 監(jiān)聽全局復(fù)制 做點什么});

上面是在document.body上全局監(jiān)聽的，然而很多人不知道的是，我們還可以為某些dom單獨添加剪切板事件：

// html結(jié)構(gòu)<div id="test1"></div><div id="test2"></div>// 寫法一樣：let test1 = document.querySelector('#test1');test1.oncopy = e => {// 監(jiān)聽test1發(fā)生的復(fù)制事件 做點什么// test1發(fā)生的復(fù)制事件會觸發(fā)回調(diào)，其他地方不會觸發(fā)回調(diào)}

其他事件也是一樣的，這里就不贅述了。

clipboardData對象:用于訪問以及修改剪貼板中的數(shù)據(jù)

兼容：

不同瀏覽器，所屬的對象不同：在IE中這個對象是window對象的屬性，在Chrome、Safari和Firefox中，這個對象是相應(yīng)的event對象的屬性。所以我們在使用的時候，需要做一下如下兼容:

document.body.oncopy = e => {let clipboardData = (e.clipboardData || window.clipboardData); // 獲取clipboardData對象 + do something}

對象方法：

對象有三個方法: getData()、setData()、clearData()

• getData() 訪問剪切板中的數(shù)據(jù)

  參數(shù)： getData()接受一個'text'參數(shù)，即要取得的數(shù)據(jù)的格式。

  在復(fù)制、剪切、粘貼觸發(fā)的事件的數(shù)據(jù)：

  實際上在chorme上測試只有paste粘貼的時候才能用getData()訪問到數(shù)據(jù)，用法如下：

  要粘貼的數(shù)據(jù)：

  document.body.onpaste = e => {let clipboardData = (e.clipboardData || window.clipboardData); // 兼容處理console.log('要粘貼的數(shù)據(jù)', clipboardData.getData('text'));}

  被復(fù)制/剪切的數(shù)據(jù)：

  在復(fù)制和剪切中的數(shù)據(jù)，需要通過window.getSelection(0).toString()來訪問:

  document.body.oncopy = e => {console.log('被復(fù)制的數(shù)據(jù):', window.getSelection(0).toString());}
• setData(): 修改剪切板中的數(shù)據(jù)

  參數(shù)：第一個參數(shù)也是'text'，第二個參數(shù)是要放在剪切板中的文本。

  剩下的留在下面仿知乎/掘金復(fù)制大段文本添加版權(quán)信息那里再說。

• clearData() :

  這個方法就不太知道了，試了好久不知道怎么用(如果有大佬知道，可以在評論區(qū)指點一下)。

  如果只是為了禁止復(fù)制，或者禁止粘貼，在下面還有另外的方法可以做到，并且可以細(xì)粒化操作。

---

應(yīng)用:

如果學(xué)習(xí)不是為了裝X，那么一切將毫無意義，來看這個東西可以在哪些場景使用：

實現(xiàn)類知乎/掘金復(fù)制大段文本添加版權(quán)信息:

實現(xiàn)很簡單：取消默認(rèn)復(fù)制之后，主要是在被復(fù)制的內(nèi)容后面添加信息，然后根據(jù)clipboardData的setData()方法將信息寫入剪貼板。

可以直接復(fù)制這段代碼到本地去試試。

// 掘金這里不是全局監(jiān)聽，應(yīng)該只是監(jiān)聽文章的dom范圍內(nèi)。document.body.oncopy = event => {event.preventDefault(); // 取消默認(rèn)的復(fù)制事件 let textFont, copyFont = window.getSelection(0).toString(); // 被復(fù)制的文字 等下插入// 防知乎掘金 復(fù)制一兩個字則不添加版權(quán)信息 超過一定長度的文字 就添加版權(quán)信息if (copyFont.length > 10) {textFont = copyFont + '\n'+ '作者：OBKoro1\n'+ '鏈接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts\n'+ '來源：掘金\n'+ '著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。';} else {textFont = copyFont; // 沒超過十個字 則采用被復(fù)制的內(nèi)容。}if (event.clipboardData) {return event.clipboardData.setData('text', textFont); // 將信息寫入粘貼板} else {// 兼容IEreturn window.clipboardData.setData("text", textFont);}}

然后command+c、command+v，輸出:

你復(fù)制的內(nèi)容 作者：OBKoro1 鏈接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts 來源：掘金 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

實現(xiàn)類起點網(wǎng)的防復(fù)制功能:

• 禁止復(fù)制+剪切
• 禁止右鍵，右鍵某些選項:全選，復(fù)制，粘貼等。
• 禁用文字選擇，能選擇卻不能復(fù)制，體驗很差。
• 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();};// 禁止復(fù)制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 禁止文本選擇 這樣不會觸發(fā)jsbody {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(某些區(qū)域)進行禁用。

破解防復(fù)制：

上面的防復(fù)制方法通過js+css實現(xiàn)的，所以思路就是：禁用js+取消user-select樣式。

Chrome瀏覽器的話：打開瀏覽器控制臺，按F1進入Setting，勾選Disable JavaScript(禁止js)。

此時如果還不能復(fù)制的話，就要去找user-select樣式,取消這個樣式就可以了。

所以那些盜版小說手打的，我真的不太能理解，Excuse me？？？

點擊復(fù)制功能：

不能使用clipboardData：

在IE中可以用window.clipboardData.setData('text','內(nèi)容')實現(xiàn)。

上文提到過，在IE中clipboardData是window的屬性。

而其他瀏覽器則是相應(yīng)的event對象的屬性，這實際上是一種安全措施，防止未經(jīng)授權(quán)的訪問,為了兼容其他瀏覽器，所以我們不能通過clipboardData來實現(xiàn)這種操作。

具體做法：

• 創(chuàng)建一個隱藏的input框
• 點擊的時候，將要復(fù)制的內(nèi)容放進input框中
• 選擇文本內(nèi)容input.select()

  這里只能用input或者textarea才能選擇文本。

• document.execCommand("copy")，執(zhí)行瀏覽器的復(fù)制命令。

  function copyText() {var text = document.getElementById("text").innerText; // 獲取要復(fù)制的內(nèi)容也可以傳進來var input = document.getElementById("input"); // 獲取隱藏input的dominput.value = text; // 修改文本框的內(nèi)容input.select(); // 選中文本document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令alert("復(fù)制成功"); }

點擊復(fù)制內(nèi)容的demo在這里，可以點進去看看。

---

結(jié)語

工作之余了解一下這些東西還是很有趣的，也可以擴寬你的知識面。

事實上只要監(jiān)聽了這些事件，我們就可以對要剪切的內(nèi)容進行各種各樣的操作，比如:復(fù)制的時候更換文本，粘貼的時候查找有沒有圖片(上傳圖片)，或者文本的長度進行剪切等等，唯一限制你的

希望看完的朋友可以點個喜歡/關(guān)注，您的支持是對我最大的鼓勵。

個人blog and 掘金個人主頁，如需轉(zhuǎn)載，請放上原文鏈接并署名。碼字不易，感謝支持！

如果喜歡本文的話，歡迎關(guān)注我的訂閱號，漫漫技術(shù)路，期待未來共同學(xué)習(xí)成長。

以上2018.8.8

參考資料：

js高程 14.2.2操作剪貼板

網(wǎng)頁上如何實現(xiàn)禁止復(fù)制粘貼以及如何破解

原生 js 實現(xiàn)點擊按鈕復(fù)制文本

總結(jié)

以上是生活随笔為你收集整理的前端er怎样操作剪切复制以及禁止复制+破解等的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。