JS防止複製文字圖片！4招鎖死右鍵與快捷鍵教學

想保護原創內容，卻不知道該怎麼做？這段輕量級 JavaScript 原始碼能立刻為網頁築起防護牆，有效阻止訪客隨意複製文字或下載圖片，非常適合數位作品集與付費內容網站。

四面鎖死防護功能總覽

• 禁用右鍵選單：直接阻止訪客滑鼠右鍵「另存圖片」或選取複製。
• 攔截複製快捷鍵：徹底鎖死 Ctrl+C、Ctrl+X 以及鍵盤 PrintScreen 截圖鍵。
• 阻擋手機多指觸控：防止行動裝置用戶透過長按螢幕來選取網頁文字。
• 智慧保留表單功能：自動判斷輸入框，確保聯絡表單內仍可正常複製貼上。

即插即用完整程式碼

直接複製下方精簡程式碼，並將其嵌入在網站的 <head> 或 </body> 標籤之前：

<script>
/* ===== 1. 禁用滑鼠右鍵 ===== */
document.addEventListener('contextmenu', e => e.preventDefault());

/* ===== 2. 防手機長按選取 ===== */
const blockTouch = e => {
  if (e.touches.length > 1) e.preventDefault();
};
document.addEventListener('touchstart', blockTouch);
document.addEventListener('touchend',   blockTouch);
document.addEventListener('touchmove',  blockTouch);

/* ===== 3. 攔截鍵盤快捷鍵 ===== */
const isEditable = el => el.closest('input, textarea, [contenteditable="true"]');

document.addEventListener('keydown', e => {
  if (isEditable(e.target)) return; 
  const ctrl = e.ctrlKey || e.metaKey;
  if (
    (ctrl && (e.key === 'c' || e.key === 'x' || e.key === 'Insert')) ||
    e.key === 'PrintScreen'
  ) {
    e.preventDefault();
  }
});

/* ===== 4. 全域阻擋複製事件 ===== */
document.addEventListener('copy', e => {
  if (!isEditable(e.target)) e.preventDefault();
});
</script>

核心防護邏輯技術解析

1. 瞬間閹割右鍵功能

document.addEventListener('contextmenu', e => e.preventDefault());

這行程式碼直接監聽網頁的 contextmenu 事件。只要訪客點擊右鍵，瀏覽器就會立刻攔截並強制關閉選單，從根本切斷另存圖片的路徑。

2. 排除表單確保流暢體驗

const isEditable = el => el.closest('input, textarea, [contenteditable="true"]');

使用原生 JavaScript 的 closest() 方法，精準判斷訪客目前點擊的節點是否為輸入框或文字置入區。如果是，則不發動防護，這能完美保障使用者填寫表單時的基本權利。

3. 跨系統通殺快捷鍵

程式碼同時偵測 Windows 的 ctrlKey 與 Mac 的 metaKey 鍵。只要觸發 Ctrl+C、Ctrl+X、或 PrintScreen 截圖，事件將一律在後台被抹除。

WordPress 網站快速部署步驟

如果你使用的是 WordPress 系統，不需要手動修改主題佈景檔案，請照著以下步驟操作：

1. 到後台外掛市集搜尋並安裝 Code Snippets 外掛。
2. 新增一個程式碼片段，並將執行位置選擇在 Footer 區塊。
3. 貼上本文提供的完整 JavaScript 程式碼，點擊儲存並啟用即可生效。

網頁防複製常見問題 QA

這個 JavaScript 防複製方法是絕對安全的嗎？

不是。此方法僅能防止一般使用者的複製行為。技術熟練者仍可透過瀏覽器的開發者工具輕鬆繞過，這屬於「門檻防護」，並非「絕對防護」。

防複製程式碼會影響網站表單的輸入功能嗎？

不會。程式碼內建偵測機制，只要訪客是在 input、textarea 或宣告 contenteditable 的可編輯欄位內操作，仍可正常複製貼上。

WordPress 網站該如何安裝這段防複製程式碼？

建議安裝 Code Snippets 外掛，新增一個 Snippet 並將位置設定在 Footer，貼上完整程式碼後啟用即可。