js禁止document element对象选中文本实现代码

2023年6月10日下午1:49 • JavaScript

下面我来详细讲解一下如何通过JavaScript禁止document element对象选中文本实现代码。

方法一：利用CSS属性禁止选中文本

我们可以利用CSS属性来实现禁止选中文本的效果，具体方法如下：

在需要禁止选中文本的元素上加入以下CSS代码：

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

这些CSS属性对应的含义如下：

-webkit-user-select：针对 Webkit 浏览器的私有属性，表示是否允许用户选中文本；
-moz-user-select：针对 Firefox 浏览器的私有属性，表示是否允许用户选中文本；
-ms-user-select：针对 IE 浏览器的私有属性，表示是否允许用户选中文本；
user-select：标准属性，表示是否允许用户选中文本。

这些CSS属性可以分别设置为none（不允许选中文本）、text（允许选中文本）和auto（浏览器默认行为）。当我们将这些属性都设置为none时，就可以实现禁止选中文本的效果。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>禁止选中文本示例</title>
  <style>
    p {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  </style>
</head>
<body>
  <p>这里的内容不可选中。</p>
  <p>这里的内容也不可选中。</p>
</body>
</html>

在这个示例代码中，我们在<p>标签中加入了CSS代码来禁止选中文本。在浏览页面时，我们会发现无法选中文本。

方法二：通过JavaScript禁止选中文本

另外一种方法是通过JavaScript代码来实现禁止选中文本的效果。具体方法如下：

document.addEventListener('mousedown', function(event) {
  event.preventDefault();
}, false);

通过这段JavaScript代码，我们可以在文档中添加一个mousedown事件监听器，当用户按下鼠标时，可以通过event.preventDefault()方法来禁止选中文本。需要注意的是，这个方法只会阻止选中文本的默认行为，而不是阻止鼠标的默认行为。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>禁止选中文本示例</title>
  <script>
    document.addEventListener('mousedown', function(event) {
      event.preventDefault();
    }, false);
  </script>
</head>
<body>
  <p>这里的内容不可选中。</p>
  <p>这里的内容也不可选中。</p>
</body>
</html>

在这个示例代码中，我们通过JavaScript代码禁止了文本的选中。在浏览页面时，我们会发现无法选中文本。

以上就是两种禁止文本选中的方法，包括CSS和JavaScript两种实现方式。我们可以根据具体的需求来选择使用哪种方式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js禁止document element对象选中文本实现代码 - Python技术站