Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

rocky-191

rocky-191 commented on May 26, 2019

@rocky-191

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

tzjoke

tzjoke commented on May 28, 2019

@tzjoke

postcss + user-select: none; 😆

Max199909

Max199909 commented on May 28, 2019

@Max199909

user-select:none

542154968

542154968 commented on Jul 12, 2019

@542154968
Konata9

Konata9 commented on Sep 19, 2019

@Konata9

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

CoderLeiShuo

CoderLeiShuo commented on Aug 17, 2020

@CoderLeiShuo
  • 禁止复制+剪切
  • 禁止右键,右键某些选项:全选、复制、粘贴等
  • 禁用文字选择,能选择却不能复制,体验很差
  • 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中的复制粘贴功能

smile-2008

smile-2008 commented on Oct 12, 2020

@smile-2008

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

smile-2008

smile-2008 commented on Oct 30, 2020

@smile-2008

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

zxcdsaqwe123

zxcdsaqwe123 commented on Oct 29, 2021

@zxcdsaqwe123

NODRAG?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@rocky-191@Max199909

        Issue actions

          [css] 第40天 怎么才能让图文不可复制? · Issue #149 · haizlin/fe-interview