Fe-interview: [css] 第40天 怎么才能让图文不可复制？

[haizhilin2013]

第40天 怎么才能让图文不可复制？

[rocky-191]

-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

[tzjoke]

postcss + user-select: none; 😆

[Max199909]

user-select:none

[542154968]

禁止用户打开浏览器控制台

[Konata9]

利用 user-select: none 属性，让元素不能被选中。

[CoderLeiShuo]

• 禁止复制+剪切
• 禁止右键，右键某些选项：全选、复制、粘贴等
• 禁用文字选择，能选择却不能复制，体验很差
• user-select用css禁止选择文本

// 禁止右键菜单
document.body.oncontextmenu = e => {
    return false;
    // e.preventDefault();
}
// 禁止文字选择
document.body.onselectstart = e => {
    return false;
    // e.preventDefault();
}
// 禁止复制
document.body.oncopy = e => {
    return false;
    // e.preventDefault();
}
// 禁止粘贴
document.body.onpaste = e => {
    return false;
    // e.preventDefault();
}

CSS方式：

/* CSS禁止文本选择，这样不会触发js */
body {
       user-select: none;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       -o-user-select: none;
      }

使用e.preventDefault()也可以禁用，但建议使用return false这样就不用去访问e和e的方法了。

示例中document.body全局都禁用了，也可以对dom（某些区域）进行禁用

来源：JavaScript中的复制粘贴功能

[MrZ2019]

-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

[MrZ2019]

-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;