某些特定的業(yè)務場景下，我們可能會有禁止用戶復制頁面內(nèi)容的需求。比如：

• 付費內(nèi)容保護：在線小說、付費課程等，希望防止內(nèi)容被輕易拷貝和傳播。
• 試卷或答題系統(tǒng)：防止考生將題目復制出去尋求場外幫助。
• 敏感信息展示：如銀行卡號、個人身份信息等，減少被意外泄露的風險。

雖然從技術上完全阻止一個“有心人”拷貝內(nèi)容幾乎是不可能的（畢竟還有截圖、拍照等物理手段），但作為前端開發(fā)者，我們有多種方法可以極大地增加復制的難度，從而在一定程度上達到我們的目的。

方法一：CSS 魔法 —— user-select: none

這是最簡單、最快捷，也是最常用的一種方法。CSS 的 user-select 屬性可以控制用戶是否能夠選擇文本。

/* 應用到需要禁止選擇的元素上 */
.no-copy {
  user-select: none;
  /* 兼容舊版瀏覽器 */
  -webkit-user-select: none; /* Safari, Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
}

/* 或者直接粗暴地應用到整個頁面 */
body {
  user-select: none;
}

效果：當鼠標劃過應用了該樣式的區(qū)域時，將無法選中任何文本，光標也不會變成文本選擇的 I 型。自然也就無法進行復制操作。

優(yōu)點：

• 實現(xiàn)極其簡單，一行 CSS 搞定。
• 純樣式控制，沒有 JavaScript 性能開銷。

缺點：

• 防君子不防小人：任何一個懂點前端的開發(fā)者，都可以通過瀏覽器開發(fā)者工具，輕松地找到這個 CSS 屬性并禁用它，然后就能愉快地復制了。
• 體驗不佳：用戶無法選擇文本，有時可能會影響正常的交互預期。

方法二：JavaScript 事件監(jiān)聽 —— 控制 copy 和 contextmenu 事件

如果想做得更“絕”一點，我們可以通過 JavaScript 來監(jiān)聽和阻止用戶的復制行為。

1. 禁用復制事件 (copy)

當用戶執(zhí)行復制操作時（無論是通過 Ctrl+C 快捷鍵還是右鍵菜單），copy 事件會被觸發(fā)。我們可以攔截它。

2. 禁用右鍵菜單 (contextmenu)

為了防止用戶通過右鍵菜單進行復制，我們可以把右鍵菜單也一并禁用掉。

document.addEventListener('contextmenu', function(e) {
  // 阻止默認的右鍵菜單彈出行為
  e.preventDefault();
});

3. 禁用鍵盤快捷鍵 (keydown)

更進一步，我們還可以監(jiān)控鍵盤事件，直接禁用 Ctrl+C。

組合使用：將以上 JS 代碼和 CSS 的 user-select 結合起來，就能構建一個更強的“防御體系”。

優(yōu)點：

• 比純 CSS 更難破解，因為禁用 JS 比修改 CSS 要麻煩一些。
• 可以提供自定義的交互反饋，比如彈窗提醒。

缺點：

• 依然可破：在瀏覽器開發(fā)者工具中禁用 JavaScript，所有這些限制都會失效。
• 體驗極差：粗暴地禁用右鍵和快捷鍵會嚴重影響用戶的正常瀏覽習慣（比如右鍵刷新、打開新標簽頁等），可能會激怒用戶。

方法三：“溫柔”的魔法 —— 在復制內(nèi)容中“加料”

有時候，我們不一定非要完全禁止復制，而是希望在用戶復制的內(nèi)容中追加一些我們自己的信息，比如版權聲明或來源鏈接。這是一種更優(yōu)雅、更尊重用戶的做法。

我們可以監(jiān)聽 copy 事件，然后通過 Clipboard API 修改剪貼板中的內(nèi)容。

document.addEventListener('copy', function(e) {
 // 獲取用戶選中的文本
 const selection = window.getSelection().toString();
 // 你想追加的版權信息
 const copyright = `\n\n----------------\n來源公眾號：FedJavaScript`;
 // 阻止默認的復制行為
  e.preventDefault();
 // 將 "選中內(nèi)容 + 版權信息" 寫入剪貼板
  e.clipboardData.setData('text/plain', selection + copyright);
});

效果：用戶可以正常復制，但當他們粘貼時，會發(fā)現(xiàn)內(nèi)容末尾自動附上了你的版權聲明。

優(yōu)點：

• 用戶體驗好：不影響用戶的核心操作，只是附加了信息。
• 君子協(xié)定：這是一種良性的引導，而非強制的封鎖。

思考：我們真的需要禁止復制嗎？

在實施這些技術方案之前，我們應該先問自己一個問題：禁止復制真的是最好的選擇嗎？

• 技術上的徒勞：對于執(zhí)意要獲取內(nèi)容的人來說，任何前端層面的限制都是紙老虎。他們總能通過禁用 JS、查看源代碼、使用爬蟲，甚至直接截圖 OCR 來獲取內(nèi)容。
• 用戶體驗的災難：強行改變用戶的操作習慣，尤其是禁用右鍵，是一種非常糟糕的設計。它破壞了 Web 的開放性和可訪問性，可能會讓你的網(wǎng)站流失大量用戶。

替代方案：

• 水?。簩τ趫D片或重要文檔，添加可見或不可見的數(shù)字水印，是更好的版權追蹤方式。
• 內(nèi)容分段加載/懶加載：增加爬蟲獲取完整內(nèi)容的難度。

作為前端開發(fā)者，我們掌握了“禁止復制”的屠龍之術，但更應該思考何時以及是否應該拔出這把劍。在大多數(shù)情況下，選擇更開放、更友好的“修改剪貼板”方案，或者干脆相信用戶的善意，可能是更明智的選擇。