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.

Sign up for GitHub

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

Jump to bottom

如何实现页面文本不可选中，不可复制【热度: 255】 #996

Open
yanlele opened this issue Oct 13, 2024 · 0 comments
Open

如何实现页面文本不可选中，不可复制【热度: 255】 #996

yanlele opened this issue Oct 13, 2024 · 0 comments
Labels
web应用场景 应用场景类问题 京东 公司标签
Milestone
中

Comments

@yanlele
Copy link
Member

yanlele commented Oct 13, 2024

关键词：禁止文本复制

可以通过 CSS 和 JavaScript 结合的方式实现页面文本不可选中和不可复制。

一、使用 CSS

可以通过设置 CSS 属性来禁止用户选中页面文本：

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

这将禁止在整个页面上进行文本选择。

二、使用 JavaScript

如果仅使用 CSS 不能满足需求，可以结合 JavaScript 进一步增强禁止复制的功能。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <p>这是一些不可选中和不可复制的文本。</p>
    <script>
      document.addEventListener("copy", function (e) {
        e.preventDefault();
      });
    </script>
  </body>
</html>

在这个例子中，通过监听copy事件并调用preventDefault()方法来阻止复制操作。
@yanlele yanlele added web应用场景 应用场景类问题 京东 公司标签 labels Oct 13, 2024
@yanlele yanlele added this to the 中 milestone Oct 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
web应用场景 应用场景类问题 京东 公司标签
Projects
None yet
Milestone
中
Development

No branches or pull requests
1 participant
@yanlele