当前位置： 首页 > news >正文

CSS+JavaScript 禁用浏览器复制功能的几种方法

news 2025/7/23 13:19:56

🛡️ 禁用浏览器复制功能完整指南

网页中禁用用户的复制功能，包括 CSS 方法、JavaScript 方法、综合解决方案以及实际应用场景。适用于需要保护内容版权、防止恶意爬取或提升用户体验的场景。

📋 目录

  • 🚀 快速开始
  • 🎨 CSS 方法
  • ⚡ JavaScript 方法
  • 🔧 综合解决方案
  • 🎯 高级技巧
  • 💡 实际应用示例
  • ❓ 常见问题解答

🚀 快速开始

如果您想快速实现基本的复制保护，可以直接使用以下代码：

<!DOCTYPE html>
<html><head><style>/* 基础保护样式 */.protected {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;}</style></head><body class="protected"><script>// 基础保护脚本document.addEventListener("contextmenu", (e) => e.preventDefault());document.addEventListener("keydown", (e) => {if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 65)) {e.preventDefault();}});</script><h1>受保护的内容</h1><p>这里的内容无法被轻易复制</p></body>
</html>

🎨 CSS 方法

CSS 方法是最基础且高效的保护方式，通过样式属性来禁用用户的选择和交互行为。

1. 禁用文本选择

基础语法
/* 禁用所有文本选择 - 基础版本 */
.no-select {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge */user-select: none; /* 标准语法 */
}/* 应用到整个页面 */
body {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
高级配置
/* 完整的文本选择保护 */
.protected-content {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;/* 移动端优化 */-webkit-touch-callout: none; /* 禁用iOS Safari的长按菜单 */-webkit-tap-highlight-color: transparent; /* 禁用点击高亮 */-webkit-appearance: none; /* 移除默认样式 *//* 禁用文本选择手柄 */-webkit-text-size-adjust: none;
}/* 选择性允许文本选择 */
.selectable {-webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;user-select: text;
}/* 只允许选择文本内容，不允许选择元素 */
.text-only {-webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;user-select: text;
}/* 允许全部选择 */
.select-all {-webkit-user-select: all;-moz-user-select: all;-ms-user-select: all;user-select: all;
}
实际使用示例
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><style>/* 保护主要内容 */.article-content {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;padding: 20px;border: 1px solid #ddd;background: #f9f9f9;}/* 允许输入框正常使用 */.user-input {-webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;user-select: text;padding: 10px;border: 1px solid #ccc;width: 100%;margin: 10px 0;}/* 代码块可以选择 */.code-block {-webkit-user-select: all;-moz-user-select: all;-ms-user-select: all;user-select: all;background: #f4f4f4;padding: 10px;font-family: monospace;}</style></head><body><div class="article-content"><h2>受保护的文章标题</h2><p>这段内容无法被选择和复制</p><img src="protected-image.jpg" alt="受保护的图片" /></div><inputtype="text"class="user-input"placeholder="这里可以正常输入和选择文本"/><div class="code-block">console.log('这段代码可以被选择复制');</div></body>
</html>

2. 禁用拖拽功能

/* 禁用图片和媒体元素的拖拽 */
img,
video,
audio,
canvas,
svg {-webkit-user-drag: none;-khtml-user-drag: none;-moz-user-drag: none;-o-user-drag: none;user-drag: none;pointer-events: none; /* 完全禁用鼠标事件 */
}/* 禁用所有元素的拖拽 */
* {-webkit-user-drag: none;-khtml-user-drag: none;-moz-user-drag: none;-o-user-drag: none;user-drag: none;
}/* 恢复必要的交互元素 */
.interactive,
button,
input,
textarea,
select,
a {pointer-events: auto;-webkit-user-drag: auto;-khtml-user-drag: auto;-moz-user-drag: auto;-o-user-drag: auto;user-drag: auto;
}/* 特殊处理：可拖拽的元素 */
.draggable {-webkit-user-drag: element;-khtml-user-drag: element;-moz-user-drag: element;-o-user-drag: element;user-drag: element;
}

3. 移动端特殊优化

/* 移动端复制保护 */
.mobile-protected {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;/* iOS Safari 特殊处理 */-webkit-touch-callout: none; /* 禁用长按菜单 */-webkit-tap-highlight-color: transparent; /* 禁用点击高亮 *//* Android 特殊处理 */-webkit-text-size-adjust: none; /* 禁用文本大小调整 *//* 禁用双击缩放 */touch-action: manipulation;/* 禁用选择手柄 */-webkit-appearance: none;
}/* 禁用文本选择高亮 */
.mobile-protected::selection {background: transparent;
}.mobile-protected::-moz-selection {background: transparent;
}/* 禁用iOS Safari的选择工具栏 */
.mobile-protected::-webkit-selection {background: transparent;
}

⚡ JavaScript 方法

JavaScript 方法提供了更灵活和强大的保护功能，可以动态控制用户行为并提供反馈。

1. 禁用右键菜单

基础实现
// 方法1: 全局禁用右键菜单
document.addEventListener("contextmenu", function (e) {e.preventDefault();return false;
});// 方法2: 针对特定元素
document.getElementById("protected-content").addEventListener("contextmenu", function (e) {e.preventDefault();alert("右键功能已被禁用");return false;});// 方法3: 使用事件委托
document.addEventListener("contextmenu", function (e) {if (e.target.classList.contains("protected")) {e.preventDefault();console.log("尝试右键点击受保护内容");return false;}
});
高级实现
// 智能右键菜单禁用
class ContextMenuProtection {constructor(options = {}) {this.options = {showWarning: true,warningMessage: "此内容受到保护，无法使用右键菜单",allowedElements: ["input", "textarea"],...options,};this.init();}init() {document.addEventListener("contextmenu", (e) => this.handleContextMenu(e));}handleContextMenu(e) {const tagName = e.target.tagName.toLowerCase();// 允许特定元素使用右键菜单if (this.options.allowedElements.includes(tagName)) {return true;}// 检查是否有特殊标记if (e.target.dataset.allowContextMenu === "true") {return true;}e.preventDefault();if (this.options.showWarning) {this.showWarning(this.options.warningMessage);}return false;}showWarning(message) {// 创建自定义提示const warning = document.createElement("div");warning.textContent = message;warning.style.cssText = `position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #ff4444;color: white;padding: 10px 20px;border-radius: 5px;z-index: 10000;font-size: 14px;`;document.body.appendChild(warning);setTimeout(() => {document.body.removeChild(warning);}, 2000);}
}// 使用示例
const contextProtection = new ContextMenuProtection({showWarning: true,warningMessage: "内容受保护，禁止右键操作",allowedElements: ["input", "textarea", "select"],
});

2. 禁用键盘快捷键

基础实现
// 禁用常见的复制快捷键
document.addEventListener("keydown", function (e) {// 禁用 Ctrl+C (复制)if (e.ctrlKey && e.keyCode === 67) {e.preventDefault();return false;}// 禁用 Ctrl+A (全选)if (e.ctrlKey && e.keyCode === 65) {e.preventDefault();return false;}// 禁用 Ctrl+V (粘贴)if (e.ctrlKey && e.keyCode === 86) {e.preventDefault();return false;}// 禁用 Ctrl+X (剪切)if (e.ctrlKey && e.keyCode === 88) {e.preventDefault();return false;}// 禁用 Ctrl+S (保存)if (e.ctrlKey && e.keyCode === 83) {e.preventDefault();return false;}// 禁用 F12 (开发者工具)if (e.keyCode === 123) {e.preventDefault();return false;}// 禁用 Ctrl+Shift+I (开发者工具)if (e.ctrlKey && e.shiftKey && e.keyCode === 73) {e.preventDefault();return false;}// 禁用 Ctrl+U (查看源代码)if (e.ctrlKey && e.keyCode === 85) {e.preventDefault();return false;}
});
高级键盘保护
class KeyboardProtection {constructor(options = {}) {this.options = {disableCopy: true,disablePaste: true,disableSelectAll: true,disableSave: true,disableDevTools: true,disablePrint: true,allowedInputs: ["input", "textarea"],showWarnings: true,...options,};this.forbiddenKeys = this.buildForbiddenKeys();this.init();}buildForbiddenKeys() {const keys = [];if (this.options.disableCopy) {keys.push({ ctrl: true, key: 67, name: "Ctrl+C (复制)" });}if (this.options.disablePaste) {keys.push({ ctrl: true, key: 86, name: "Ctrl+V (粘贴)" });}if (this.options.disableSelectAll) {keys.push({ ctrl: true, key: 65, name: "Ctrl+A (全选)" });}if (this.options.disableSave) {keys.push({ ctrl: true, key: 83, name: "Ctrl+S (保存)" });}if (this.options.disableDevTools) {keys.push({ key: 123, name: "F12 (开发者工具)" },{ ctrl: true, shift: true, key: 73, name: "Ctrl+Shift+I (开发者工具)" },{ ctrl: true, shift: true, key: 74, name: "Ctrl+Shift+J (控制台)" },{ ctrl: true, key: 85, name: "Ctrl+U (查看源代码)" });}if (this.options.disablePrint) {keys.push({ ctrl: true, key: 80, name: "Ctrl+P (打印)" });}return keys;}init() {document.addEventListener("keydown", (e) => this.handleKeyDown(e));}handleKeyDown(e) {const target = e.target;const tagName = target.tagName.toLowerCase();// 允许在输入框中使用某些快捷键if (this.options.allowedInputs.includes(tagName)) {// 在输入框中只禁用开发者工具相关快捷键if (this.options.disableDevTools) {const devToolsKeys = this.forbiddenKeys.filter((key) =>key.name.includes("开发者工具") ||key.name.includes("控制台") ||key.name.includes("查看源代码"));for (let forbidden of devToolsKeys) {if (this.matchesKeyCombo(e, forbidden)) {e.preventDefault();this.showWarning(`${forbidden.name} 已被禁用`);return false;}}}return true;}// 检查所有禁用的快捷键for (let forbidden of this.forbiddenKeys) {if (this.matchesKeyCombo(e, forbidden)) {e.preventDefault();if (this.options.showWarnings) {this.showWarning(`${forbidden.name} 已被禁用`);}return false;}}}matchesKeyCombo(event, combo) {return ((!combo.ctrl || event.ctrlKey) &&(!combo.shift || event.shiftKey) &&(!combo.alt || event.altKey) &&event.keyCode === combo.key);}showWarning(message) {if (this.options.showWarnings) {console.warn(message);// 可以在这里添加自定义的警告显示逻辑}}
}// 使用示例
const keyboardProtection = new KeyboardProtection({disableCopy: true,disablePaste: true,disableSelectAll: true,disableSave: true,disableDevTools: true,disablePrint: true,allowedInputs: ["input", "textarea"],showWarnings: true,
});

3. 禁用文本选择

// 方法1: 禁用选择事件
document.addEventListener("selectstart", function (e) {e.preventDefault();return false;
});// 方法2: 清除已选择的文本
document.addEventListener("mouseup", function () {if (window.getSelection) {window.getSelection().removeAllRanges();} else if (document.selection) {document.selection.empty();}
});// 方法3: 禁用拖拽选择
document.addEventListener("dragstart", function (e) {e.preventDefault();return false;
});// 方法4: 高级文本选择保护
class TextSelectionProtection {constructor(options = {}) {this.options = {clearSelectionInterval: 100, // 清除选择的间隔时间(ms)allowedElements: ["input", "textarea"],...options,};this.init();}init() {// 禁用选择开始事件document.addEventListener("selectstart", (e) => this.handleSelectStart(e));// 禁用拖拽事件document.addEventListener("dragstart", (e) => this.handleDragStart(e));// 定期清除选择if (this.options.clearSelectionInterval > 0) {setInterval(() => this.clearSelection(),this.options.clearSelectionInterval);}// 监听鼠标事件document.addEventListener("mouseup", () => this.clearSelection());document.addEventListener("keyup", () => this.clearSelection());}handleSelectStart(e) {const tagName = e.target.tagName.toLowerCase();if (this.options.allowedElements.includes(tagName)) {return true;}e.preventDefault();return false;}handleDragStart(e) {const tagName = e.target.tagName.toLowerCase();if (this.options.allowedElements.includes(tagName)) {return true;}e.preventDefault();return false;}clearSelection() {try {if (window.getSelection) {const selection = window.getSelection();if (selection.rangeCount > 0) {// 检查选择是否在允许的元素中const range = selection.getRangeAt(0);const container = range.commonAncestorContainer;const element =container.nodeType === Node.TEXT_NODE? container.parentElement: container;const tagName = element.tagName ? element.tagName.toLowerCase() : "";if (!this.options.allowedElements.includes(tagName)) {selection.removeAllRanges();}}} else if (document.selection) {document.selection.empty();}} catch (e) {// 忽略错误}}
}// 使用示例
const textProtection = new TextSelectionProtection({clearSelectionInterval: 50,allowedElements: ["input", "textarea", "select"],
});

4. 监控开发者工具

// 基础开发者工具检测
let devtools = {open: false,orientation: null,
};const threshold = 160;function detectDevTools() {if (window.outerHeight - window.innerHeight > threshold ||window.outerWidth - window.innerWidth > threshold) {if (!devtools.open) {devtools.open = true;console.log("开发者工具已打开");// 可以在这里添加警告或重定向// window.location.href = 'about:blank';}} else {devtools.open = false;}
}setInterval(detectDevTools, 500);// 高级开发者工具检测
class DevToolsDetection {constructor(options = {}) {this.options = {checkInterval: 1000,onDetected: () => console.warn("检测到开发者工具"),onClosed: () => console.log("开发者工具已关闭"),threshold: 160,redirectUrl: null,showWarning: true,...options,};this.isOpen = false;this.init();}init() {setInterval(() => this.check(), this.options.checkInterval);// 检测控制台输出this.detectConsoleOutput();// 检测调试器this.detectDebugger();}check() {const widthThreshold =window.outerWidth - window.innerWidth > this.options.threshold;const heightThreshold =window.outerHeight - window.innerHeight > this.options.threshold;if (widthThreshold || heightThreshold) {if (!this.isOpen) {this.isOpen = true;this.handleDetected();}} else {if (this.isOpen) {this.isOpen = false;this.handleClosed();}}}detectConsoleOutput() {// 重写console方法来检测控制台使用const originalLog = console.log;console.log = (...args) => {this.handleDetected();return originalLog.apply(console, args);};}detectDebugger() {// 定期检查调试器setInterval(() => {const start = performance.now();debugger;const end = performance.now();if (end - start > 100) {this.handleDetected();}}, 3000);}handleDetected() {this.options.onDetected();if (this.options.showWarning) {alert("检测到开发者工具，页面功能可能受限");}if (this.options.redirectUrl) {window.location.href = this.options.redirectUrl;}}handleClosed() {this.options.onClosed();}
}// 使用示例
const devToolsDetection = new DevToolsDetection({checkInterval: 1000,onDetected: () => {console.warn("开发者工具被检测到");document.body.style.display = "none";},onClosed: () => {document.body.style.display = "block";},threshold: 160,showWarning: true,
});

🔧 综合解决方案

将 CSS 和 JavaScript 方法结合起来，创建一个完整的复制保护系统。

完整的保护类

class CopyProtection {constructor(options = {}) {this.options = {// 基础保护选项disableRightClick: true,disableSelection: true,disableKeyboardShortcuts: true,disableDeveloperTools: true,disableDragDrop: true,disablePrint: true,// 用户体验选项showWarnings: true,allowedElements: ["input", "textarea", "select"],warningDuration: 2000,// 高级选项clearSelectionInterval: 100,devToolsCheckInterval: 1000,redirectOnDevTools: false,redirectUrl: "about:blank",// 自定义消息messages: {rightClick: "右键功能已被禁用",keyboard: "该快捷键已被禁用",devTools: "检测到开发者工具",selection: "文本选择已被禁用",},...options,};this.isDevToolsOpen = false;this.init();}init() {// 添加CSS样式this.addProtectionStyles();// 初始化各种保护功能if (this.options.disableRightClick) {this.initRightClickProtection();}if (this.options.disableSelection) {this.initSelectionProtection();}if (this.options.disableKeyboardShortcuts) {this.initKeyboardProtection();}if (this.options.disableDeveloperTools) {this.initDevToolsDetection();}if (this.options.disableDragDrop) {this.initDragDropProtection();}if (this.options.disablePrint) {this.initPrintProtection();}console.log("🛡️ 复制保护系统已启动");}addProtectionStyles() {const style = document.createElement("style");style.id = "copy-protection-styles";style.textContent = `/* 基础保护样式 */.copy-protected {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-webkit-tap-highlight-color: transparent;-webkit-user-drag: none;-khtml-user-drag: none;-moz-user-drag: none;-o-user-drag: none;user-drag: none;}/* 媒体元素保护 */.copy-protected img,.copy-protected video,.copy-protected audio,.copy-protected canvas {pointer-events: none;-webkit-user-drag: none;-khtml-user-drag: none;-moz-user-drag: none;-o-user-drag: none;user-drag: none;}/* 选择高亮禁用 */.copy-protected::selection {background: transparent;}.copy-protected::-moz-selection {background: transparent;}/* 警告提示样式 */.copy-protection-warning {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: linear-gradient(135deg, #ff6b6b, #ee5a24);color: white;padding: 15px 25px;border-radius: 8px;box-shadow: 0 4px 20px rgba(0,0,0,0.3);z-index: 999999;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size: 14px;font-weight: 500;text-align: center;animation: copyProtectionFadeIn 0.3s ease-out;}@keyframes copyProtectionFadeIn {from {opacity: 0;transform: translate(-50%, -50%) scale(0.8);}to {opacity: 1;transform: translate(-50%, -50%) scale(1);}}/* 允许的元素恢复正常功能 */.copy-protected input,.copy-protected textarea,.copy-protected select {-webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;user-select: text;pointer-events: auto;}`;document.head.appendChild(style);// 应用保护样式到bodydocument.body.classList.add("copy-protected");}initRightClickProtection() {document.addEventListener("contextmenu", (e) => {const tagName = e.target.tagName.toLowerCase();if (this.options.allowedElements.includes(tagName)) {return true;}if (e.target.dataset.allowContextMenu === "true") {return true;}e.preventDefault();if (this.options.showWarnings) {this.showWarning(this.options.messages.rightClick);}return false;});}initSelectionProtection() {// 禁用选择开始document.addEventListener("selectstart", (e) => {const tagName = e.target.tagName.toLowerCase();if (this.options.allowedElements.includes(tagName)) {return true;}e.preventDefault();return false;});// 定期清除选择if (this.options.clearSelectionInterval > 0) {setInterval(() => {this.clearSelection();}, this.options.clearSelectionInterval);}// 监听鼠标和键盘事件document.addEventListener("mouseup", () => this.clearSelection());document.addEventListener("keyup", () => this.clearSelection());}clearSelection() {try {if (window.getSelection) {const selection = window.getSelection();if (selection.rangeCount > 0) {const range = selection.getRangeAt(0);const container = range.commonAncestorContainer;const element =container.nodeType === Node.TEXT_NODE? container.parentElement: container;const tagName = element.tagName ? element.tagName.toLowerCase() : "";if (!this.options.allowedElements.includes(tagName)) {selection.removeAllRanges();}}} else if (document.selection) {document.selection.empty();}} catch (e) {// 忽略错误}}initKeyboardProtection() {const forbiddenKeys = [{ ctrl: true, key: 67, name: "Ctrl+C (复制)" },{ ctrl: true, key: 86, name: "Ctrl+V (粘贴)" },{ ctrl: true, key: 65, name: "Ctrl+A (全选)" },{ ctrl: true, key: 88, name: "Ctrl+X (剪切)" },{ ctrl: true, key: 83, name: "Ctrl+S (保存)" },{ ctrl: true, key: 80, name: "Ctrl+P (打印)" },{ key: 123, name: "F12 (开发者工具)" },{ ctrl: true, shift: true, key: 73, name: "Ctrl+Shift+I (开发者工具)" },{ ctrl: true, shift: true, key: 74, name: "Ctrl+Shift+J (控制台)" },{ ctrl: true, key: 85, name: "Ctrl+U (查看源代码)" },];document.addEventListener("keydown", (e) => {const target = e.target;const tagName = target.tagName.toLowerCase();// 允许在输入框中使用某些快捷键if (this.options.allowedElements.includes(tagName)) {// 在输入框中只禁用开发者工具相关快捷键const devToolsKeys = forbiddenKeys.filter((key) =>key.name.includes("开发者工具") ||key.name.includes("控制台") ||key.name.includes("查看源代码"));for (let forbidden of devToolsKeys) {if (this.matchesKeyCombo(e, forbidden)) {e.preventDefault();if (this.options.showWarnings) {this.showWarning(this.options.messages.keyboard);}return false;}}return true;}// 检查所有禁用的快捷键for (let forbidden of forbiddenKeys) {if (this.matchesKeyCombo(e, forbidden)) {e.preventDefault();if (this.options.showWarnings) {this.showWarning(this.options.messages.keyboard);}return false;}}});}matchesKeyCombo(event, combo) {return ((!combo.ctrl || event.ctrlKey) &&(!combo.shift || event.shiftKey) &&(!combo.alt || event.altKey) &&event.keyCode === combo.key);}initDragDropProtection() {document.addEventListener("dragstart", (e) => {const tagName = e.target.tagName.toLowerCase();if (this.options.allowedElements.includes(tagName)) {return true;}e.preventDefault();return false;});}initPrintProtection() {// 禁用打印快捷键已在键盘保护中处理// 这里可以添加额外的打印保护逻辑window.addEventListener("beforeprint", (e) => {if (this.options.showWarnings) {this.showWarning("打印功能已被禁用");}e.preventDefault();return false;});}initDevToolsDetection() {setInterval(() => {const widthThreshold = window.outerWidth - window.innerWidth > 160;const heightThreshold = window.outerHeight - window.innerHeight > 160;if (widthThreshold || heightThreshold) {if (!this.isDevToolsOpen) {this.isDevToolsOpen = true;this.handleDevToolsDetected();}} else {this.isDevToolsOpen = false;}}, this.options.devToolsCheckInterval);}handleDevToolsDetected() {if (this.options.showWarnings) {this.showWarning(this.options.messages.devTools);}if (this.options.redirectOnDevTools) {setTimeout(() => {window.location.href = this.options.redirectUrl;}, 1000);}}showWarning(message) {// 移除已存在的警告const existingWarning = document.querySelector(".copy-protection-warning");if (existingWarning) {existingWarning.remove();}// 创建新的警告const warning = document.createElement("div");warning.className = "copy-protection-warning";warning.textContent = message;document.body.appendChild(warning);// 自动移除警告setTimeout(() => {if (warning.parentNode) {warning.parentNode.removeChild(warning);}}, this.options.warningDuration);}// 公共方法：启用保护enable() {document.body.classList.add("copy-protected");console.log("🛡️ 复制保护已启用");}// 公共方法：禁用保护disable() {document.body.classList.remove("copy-protected");console.log("🔓 复制保护已禁用");}// 公共方法：销毁保护destroy() {// 移除样式const style = document.getElementById("copy-protection-styles");if (style) {style.remove();}// 移除类名document.body.classList.remove("copy-protected");// 移除警告const warnings = document.querySelectorAll(".copy-protection-warning");warnings.forEach((warning) => warning.remove());console.log("🗑️ 复制保护已销毁");}
}// 使用示例
const protection = new CopyProtection({// 基础保护选项disableRightClick: true,disableSelection: true,disableKeyboardShortcuts: true,disableDeveloperTools: true,disableDragDrop: true,disablePrint: false,// 用户体验选项showWarnings: true,allowedElements: ["input", "textarea", "select"],warningDuration: 3000,// 高级选项clearSelectionInterval: 50,devToolsCheckInterval: 1000,redirectOnDevTools: false,// 自定义消息messages: {rightClick: "🚫 右键功能已被禁用",keyboard: "⌨️ 该快捷键已被禁用",devTools: "🔧 检测到开发者工具",selection: "📝 文本选择已被禁用",},
});

🎯 高级技巧

1. 动态内容保护

// 动态添加保护到新内容
function protectNewContent() {const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {mutation.addedNodes.forEach((node) => {if (node.nodeType === Node.ELEMENT_NODE) {node.classList.add("copy-protected");}});});});observer.observe(document.body, {childList: true,subtree: true,});
}

2. 图片水印保护

// 为图片添加水印
function addWatermarkToImages() {document.querySelectorAll("img").forEach((img) => {img.addEventListener("load", function () {const canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");canvas.width = this.naturalWidth;canvas.height = this.naturalHeight;// 绘制原图ctx.drawImage(this, 0, 0);// 添加水印ctx.font = "20px Arial";ctx.fillStyle = "rgba(255, 255, 255, 0.5)";ctx.fillText("© 版权所有", 10, 30);// 替换原图this.src = canvas.toDataURL();});});
}

3. 内容加密显示

// 简单的内容混淆
function obfuscateContent() {const textNodes = document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false);const nodes = [];let node;while ((node = textNodes.nextNode())) {if (node.textContent.trim()) {nodes.push(node);}}nodes.forEach((node) => {const original = node.textContent;const obfuscated = btoa(original); // Base64编码node.textContent = obfuscated;// 鼠标悬停时显示原文node.parentElement.addEventListener("mouseenter", () => {node.textContent = original;});node.parentElement.addEventListener("mouseleave", () => {node.textContent = obfuscated;});});
}

🌐 浏览器兼容性

功能ChromeFirefoxSafariEdgeIE11
user-select✅✅✅✅✅
contextmenu 事件✅✅✅✅✅
selectstart 事件✅✅✅✅✅
dragstart 事件✅✅✅✅✅
keydown 事件✅✅✅✅✅
touch-callout❌❌✅❌❌
tap-highlight-color✅❌✅✅❌

❓ 常见问题解答

Q1: 这些方法能 100%防止复制吗？

A: 不能。这些方法只能防止普通用户的意外复制，技术熟练的用户仍然可以通过多种方式绕过这些限制。

Q2: 会影响 SEO 吗？

A: 适当使用不会影响 SEO。搜索引擎爬虫通常不会执行 JavaScript，所以 CSS 的user-select: none不会影响内容索引。

Q3: 如何在保护内容的同时保持可访问性？

A:

  • 确保输入框和表单元素可以正常使用
  • 为屏幕阅读器用户提供替代的内容访问方式
  • 不要完全禁用键盘导航

Q4: 移动端效果如何？

A: 移动端的保护效果相对较好，特别是 iOS Safari 的-webkit-touch-callout: none可以有效禁用长按菜单。

 CSS+JavaScript 禁用浏览器复制功能的几种方法 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享

http://www.lryc.cn/news/596542.html

相关文章：

  • web登录页面
  • 黑马点评练习题-给店铺类型查询业务添加缓存(String和List实现)
  • kafka4.0集群部署
  • 数据结构01:链表
  • docker compose 安装使用笔记
  • Docker实战：使用Docker部署TeamMapper思维导图工具
  • 【实时Linux实战系列】基于实时Linux的传感器网络设计
  • Spring Boot音乐服务器项目-登录模块
  • 【论文阅读】Fast-BEV: A Fast and Strong Bird’s-Eye View Perception Baseline
  • 基于VU13P的百G光纤FMC高性能处理板
  • Rust实战：决策树与随机森林实现
  • 板凳-------Mysql cookbook学习 （十二--------5)
  • 【RAG优化】PDF复杂表格解析问题分析
  • 阶段1--Linux中的文件服务器（FTP、NAS、SSH）
  • 从差异到协同：OKR 与 KPI 的管理逻辑，Moka 让适配更简单
  • 苹果app应用ipa文件程序开发后如何运行到苹果iOS真机上测试？
  • C# 析构函数
  • 【论文阅读 | TIV 2024 | CDC-YOLOFusion：利用跨尺度动态卷积融合实现可见光-红外目标检测】
  • 2025年07月22日Github流行趋势
  • 坑机介绍学习研究
  • 激活函数Focal Loss 详解​
  • 数组——初识数据结构
  • DMZ网络安全基础知识
  • [3-02-02].第04节：开发应用 - RequestMapping注解的属性2
  • Fluent许可与网络安全策略
  • 【kubernetes】-2 K8S的资源管理
  • Java数据结构——ArrayList
  • 【黑马SpringCloud微服务开发与实战】（五）微服务保护
  • 嵌入式学习-土堆目标检测（3）-day27
  • 【自定义一个简单的CNN模型】——深度学习.卷积神经网络