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

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