禁用文字选择可用CSS的user-select: none（需加-webkit-、-moz-、-ms-前缀），但无法阻止右键复制；拦截复制需JS监听contextmenu和copy事件并排除表单元素；技术上无法彻底防复制，应侧重后端权限与内容策略。

用 CSS 的 user-select 禁用文字选择

直接在 index.html 的 <style> 或外部 CSS 中加一条规则即可阻止用户高亮、拖选文字，这是最轻量且兼容性足够好的方式：

• user-select: none 作用于目标元素（如 body 或具体容器），能有效防止鼠标拖选和双击选词
• 需同时写全浏览器前缀以覆盖旧版 Chrome/Firefox/Safari：-webkit-user-select、-moz-user-select、-ms-user-select
• 注意：它只禁“选中”，不阻止右键菜单或 Ctrl+C —— 如果想拦复制，得配合其他手段

拦截右键和复制事件的 JavaScript 补充方案

仅靠 CSS 无法阻止用户右键 → “复制” 或 Ctrl+C，必须用 JS 拦截事件。但要注意行为边界和可访问性影响：

• 监听 contextmenu 事件并调用 e.preventDefault() 可屏蔽右键菜单
• 监听 copy 事件可阻止复制动作，甚至可改写剪贴板内容（比如插入水印）
• 不要对整个 document 盲目绑定 —— 若页面含表单输入框（<input>、<textarea>），必须放行，否则用户无法正常输入
• 示例片段（放在 <script> 中）：

  document.addEventListener('contextmenu', e => {
    if (!e.target.matches('input, textarea, [contenteditable="true"]')) {
      e.preventDefault();
    }
  });
  document.addEventListener('copy', e => {
    if (!document.activeElement.matches('input, textarea, [contenteditable="true"]')) {
      e.preventDefault();
    }
  });

为什么不能彻底防住复制？

技术上不存在“绝对禁止复制”的方案，所有前端限制都可被绕过：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 用户禁用 JS 后，所有事件监听失效；关闭 CSS 后 user-select 也不起作用
• 开发者工具里直接查看 HTML 源码、Elements 面板、或执行 document.body.innerText 即可提取文字
• 截图、OCR、甚至阅读器模式都能绕过前端限制
• 搜索引擎爬虫、屏幕阅读器也会受 user-select: none 或事件拦截干扰，可能降低可访问性

真正该关心的是使用场景和替代思路

硬性禁止复制往往适得其反，反而暴露敏感内容被盯上的事实。更务实的做法是：

立即学习“前端免费学习笔记（深入）”；

• 版权信息用图片+文字水印混合呈现（文字部分仍可选，但关键字段在图中）
• 敏感内容走服务端动态渲染 + 登录态校验，而非裸露在 HTML 源码里
• 用 robots.txt 和 meta name="robots" content="noindex" 控制搜索引擎抓取
• 如果只是防误操作，CSS user-select: none 已足够；真要防数据搬运，得从后端权限和内容分发策略入手

别把精力花在补前端的“纸糊围墙”上，重点检查哪些内容真的不该出现在客户端 HTML 里。