一些博客网站和写作平台,当你准备拷贝内容的时候可能会发现文字无法被选中,也无法使用 Ctrl + C 或右键拷贝。
实现禁止拷贝的方式也很简单,主要就是禁止选择内容,禁止弹出右键菜单,触发拷贝事件的时候阻止拷贝。
注意,一般的禁止拷贝只是针对小白用户有效,使用控制台或油猴脚本很容易就能解除限制!如果要完全禁止拷贝,只能使用 canvas
或 SVG
之类的来渲染内容,但也不能防止 OCR识别。
禁止选择内容
下面是一段 HTML:
1 2 3 4 5 6
| <div id="content"> <p>听风水榭 https://193.gs/</p> <p>禁止拷贝</p> <p>禁止拷贝</p> <p>禁止拷贝</p> </div>
|
使用 CSS 禁止选中 #content
中的内容:
1 2 3 4 5 6 7
| #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 禁止选中内容和禁止弹出右键菜单:
1 2 3 4 5 6 7 8 9 10 11
| document.addEventListener('selectstart', function(ev) { ev.preventDefault(); return false; });
document.addEventListener('contextmenu', function(ev) { ev.preventDefault(); return false; });
|
JavaScript 禁止拷贝和剪切
下面禁止拷贝和剪切,即便选中了内容也无法拷贝:
1 2 3 4 5 6 7 8 9 10 11
| document.addEventListener('copy', function(ev) { ev.preventDefault(); return false; });
document.addEventListener('cut', function(ev) { ev.preventDefault(); return false; });
|
禁止打开控制台
下面禁止使用快捷键打开控制台:
1 2 3 4 5 6 7
| document.addEventListener('keydown', function(ev) { if (ev.keyCode === 123) { ev.preventDefault(); return false; } });
|
上面只是阻止了通过 F12 打开控制台,在浏览器的主菜单还是可以打开控制台的。