一些博客网站和写作平台，当你准备拷贝内容的时候可能会发现文字无法被选中，也无法使用 Ctrl + C 或右键拷贝。

实现禁止拷贝的方式也很简单，主要就是禁止选择内容，禁止弹出右键菜单，触发拷贝事件的时候阻止拷贝。

注意，一般的禁止拷贝只是针对小白用户有效，使用控制台或油猴脚本很容易就能解除限制！如果要完全禁止拷贝，只能使用 canvas 或 SVG

之类的来渲染内容，但也不能防止 OCR识别。

禁止选择内容 下面是一段 HTML：
    <div id="content">
    <p>优创资源网    https://ucgod.cn/</p>
    <p>禁止拷贝</p>
    <p>禁止拷贝</p>
    <p>禁止拷贝</p>
    </div>
使用 CSS 禁止选中 #content 中的内容：
    #content {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

其中 user-select: none 是禁止选中内容，-webkit-touch-callout: none
可以禁止手指长按内容的默认提示。

JavaScript 禁止选中内容 下面通过 JavaScript 禁止选中内容和禁止弹出右键菜单：

    // 禁止选择
    document.addEventListener('selectstart', function(ev) {
      ev.preventDefault();
      return false;
    });
    
    // 禁止弹出右键菜单
    document.addEventListener('contextmenu', function(ev) {
      ev.preventDefault();
      return false;
    });
JavaScript 禁止拷贝和剪切 下面禁止拷贝和剪切，即便选中了内容也无法拷贝：
    // 禁止拷贝
    document.addEventListener('copy', function(ev) {
      ev.preventDefault();
      return false;
    });
    
    // 禁止剪切
    document.addEventListener('cut', function(ev) {
      ev.preventDefault();
      return false;
    });
禁止打开控制台 下面禁止使用快捷键打开控制台：
    // 禁止打开控制台
    document.addEventListener('keydown', function(ev) {
      if (ev.keyCode === 123) {
        ev.preventDefault();
        return false;
      }
    });
上面只是阻止了通过 F12 打开控制台，在浏览器的主菜单还是可以打开控制台的。
最后修改：2023 年 03 月 29 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏