【浏览器】前端页面禁用浏览器复制的方案
文章目录
- 禁用复制方案
- 1.禁用选择和禁用右键菜单
- 2.CSS user-select 属性
- 3.禁用复制剪切粘贴事件
- 4.透明层覆盖
- 5.禁用键盘快捷键
禁用复制更多的是在页面层级,要想做到完全禁止,那可能要和禁用F12调试,等诸多方面的方案一起联合使用了。如果只是简单实现,防君子不防小人啊。
太难的我也不会。
禁用复制方案
1.禁用选择和禁用右键菜单
// 禁用文本选择
document.addEventListener('selectstart', function(e) {e.preventDefault();
});// 禁用右键菜单
document.addEventListener('contextmenu', function(e) {e.preventDefault();
});
2.CSS user-select 属性
-webkit-user-select: none; /* Chrome, Safari, Opera */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE 10+ */user-select: none; /* 标准语法 */
3.禁用复制剪切粘贴事件
// 禁用复制
document.addEventListener('copy', function(e) {e.preventDefault();
});// 禁用剪切
document.addEventListener('cut', function(e) {e.preventDefault();
});// 禁用粘贴
document.addEventListener('paste', function(e) {e.preventDefault();
});
4.透明层覆盖
.overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;/* 不需要背景色,透明即可 */
}
5.禁用键盘快捷键
document.addEventListener('keydown', function(e) {// 禁用Ctrl+C (Windows/Linux)if (e.ctrlKey && e.key === 'c') {e.preventDefault();}// 禁用Cmd+C (Mac)if (e.metaKey && e.key === 'c') {e.preventDefault();}// 也可以禁用其他快捷键if (e.ctrlKey || e.metaKey) {e.preventDefault();}
});
