摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本

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

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

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

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結構
    

    

    // 寫法一樣：
    let test1 = document.querySelector("#test1");
    test1.oncopy = e => {
        // 監聽test1發生的復制事件 做點什么
        // test1發生的復制事件會觸發回調，其他地方不會觸發回調
    }

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

兼容：

不同瀏覽器，所屬的對象不同：在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 + "
"
                + "作者：OBKoro1
"
                + "鏈接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts
"
                + "來源：掘金
"
                + "著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。";
        } 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("復制成功");
}

點擊復制內容的demo在這里，可以點進去看看。

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

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

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

如果喜歡本文的話，歡迎關注我的訂閱號，漫漫技術路，期待未來共同學習成長。

以上2018.8.8

參考資料：

js高程 14.2.2操作剪貼板

網頁上如何實現禁止復制粘貼以及如何破解

原生 js 實現點擊按鈕復制文本