【浏览器】前端页面禁用浏览器复制的方案

禁用复制更多的是在页面层级，要想做到完全禁止，那可能要和禁用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();}
});