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

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

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

方法一：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;
}

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

• 優點：
  實現極其簡單，一行 CSS 搞定。
  純樣式控制，沒有 JavaScript 性能開銷。
• 缺點：
  防君子不防小人：任何一個懂點前端的開發者，都可以通過瀏覽器開發者工具，輕松地找到這個 CSS 屬性并禁用它，然后就能愉快地復制了。
  體驗不佳：用戶無法選擇文本，有時可能會影響正常的交互預期。

方法二：JavaScript 事件監聽 —— 控制 copy 和 contextmenu 事件

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

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

document.addEventListener('copy', function(e) {// 阻止默認的復制行為e.preventDefault();alert('內容保護，復制操作被阻止！');});

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

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

3. 禁用鍵盤快捷鍵 (keydown)
   更進一步，我們還可以監控鍵盤事件，直接禁用 Ctrl+C。

document.addEventListener("keydown", function (e) {// 檢測是否同時按下了Ctrl(或Cmd)和C鍵if ((e.ctrlKey || e.metaKey) && e.key === "c") {e.preventDefault();}});

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

• 優點：
  比純 CSS 更難破解，因為禁用 JS 比修改 CSS 要麻煩一些。
  可以提供自定義的交互反饋，比如彈窗提醒。
• 缺點：
  依然可破：在瀏覽器開發者工具中禁用 JavaScript，所有這些限制都會失效。
  體驗極差：粗暴地禁用右鍵和快捷鍵會嚴重影響用戶的正常瀏覽習慣（比如右鍵刷新、打開新標簽頁等），可能會激怒用戶。

方法三：“溫柔”的魔法 —— 在復制內容中“加料”

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

我們可以監聽 copy 事件，然后通過 Clipboard API 修改剪貼板中的內容。

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

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

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

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

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

• 技術上的徒勞：對于執意要獲取內容的人來說，任何前端層面的限制都是紙老虎。他們總能通過禁用 JS、查看源代碼、使用爬蟲，甚至直接截圖 OCR 來獲取內容。
• 用戶體驗的災難：強行改變用戶的操作習慣，尤其是禁用右鍵，是一種非常糟糕的設計。它破壞了 Web 的開放性和可訪問性，可能會讓你的網站流失大量用戶。
• 替代方案：
  水印：對于圖片或重要文檔，添加可見或不可見的數字水印，是更好的版權追蹤方式。
  內容分段加載/懶加載：增加爬蟲獲取完整內容的難度。
  作為前端開發者，我們掌握了“禁止復制”的屠龍之術，但更應該思考何時以及是否應該拔出這把劍。在大多數情況下，選擇更開放、更友好的“修改剪貼板”方案，或者干脆相信用戶的善意，可能是更明智的選擇。