Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css] 第40天 怎么才能让图文不可复制? #149

Open
haizhilin2013 opened this issue May 25, 2019 · 9 comments
Open

[css] 第40天 怎么才能让图文不可复制? #149

haizhilin2013 opened this issue May 25, 2019 · 9 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the css css label May 25, 2019
@rocky-191
Copy link

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

@tzjoke
Copy link

tzjoke commented May 28, 2019

postcss + user-select: none; 😆

@Max199909
Copy link

user-select:none

@542154968
Copy link

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

@Konata9
Copy link

Konata9 commented Sep 19, 2019

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

@CoderLeiShuo
Copy link

  • 禁止复制+剪切
  • 禁止右键,右键某些选项:全选、复制、粘贴等
  • 禁用文字选择,能选择却不能复制,体验很差
  • user-selectcss禁止选择文本
// 禁止右键菜单
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这样就不用去访问ee的方法了。

示例中document.body全局都禁用了,也可以对dom(某些区域)进行禁用

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

@MrZ2019
Copy link

MrZ2019 commented Oct 12, 2020

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

@MrZ2019
Copy link

MrZ2019 commented Oct 30, 2020

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

@zxcdsaqwe123
Copy link

NODRAG?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests

9 participants