如何使用 JavaScript 设置元素文本的可选择性？

在本教程中，我们将学习如何使用 JavaScript 设置元素文本的可选择性。使用 JavaScript 中的 userSelect 属性可以启用或禁用文本选择。对于 Firefox，请使用 MozUserSelect 属性并将其设置为 none，以禁用选择。

CSS 的 user-select 属性可以设置网页上的文本为可选择或不可选择。但是，有时我们必须将选择限制在触发的事件或条件下。然后，我们可以使用 JavaScript DOM，它提供了几乎所有 CSS 属性。

因此，让我们来看看如何设置元素文本的可选择性。

使用 userSelect 属性

JavaScript DOM 的 userSelect 属性用于将元素的文本设置为可选择或不可选择。我们需要双击文本才能选择它。同时，此属性也可以将文本设置为只需单击一次即可选择。

我们可以按照以下语法使用 userSelect 属性来设置元素文本是否可以使用 JavaScript 选择。

语法

var element = document.getElementById(" <your ID here> "); 
element.style.userSelect = "auto || none || text || all";

参数

  • auto − 这是默认值。您可以选择文本。

  • none − 将文本设置为不可选择。

  • text − 将文本设置为可选择。

  • all − 将文本设置为只需单击一次即可选择。

示例 1

您可以尝试运行以下代码，以使用 JavaScript 设置元素文本的可选择性：

<!DOCTYPE html> 
<html> 
<body> 
   <button onclick = "myFunction()">Click me</button> 
   <div id = "box"> 
      Click the above button. This won't allow you to select this text. Shows the usage of userSelect property. 
   </div> 
   <script> 
      function myFunction() { 
         var a = document.getElementById("box"); 
         a.style.userSelect = "none";  
         // Works in Chrome and Safari 
         a.style.WebkitUserSelect = "none";  
         // Works in Firefox 
         a.style.MozUserSelect = "none"; 
      } 
   </script> 
</body> 
</html>

示例 2

在这个例子中，我们在 div 容器内添加了一个段落。如果单击按钮，段落中的文本将不可选择。

<html> 
<head> 
   <style> 
      body{ 
         margin: 1%; 
      } 
      #div{ 
         padding: 2%; 
         border: 1px solid red; 
         width: 500px; 
         text-align: center; 
         margin: 5px; 
      } 
      #btn{ 
         font-size: larger; 
         background-color: black; 
         color: white; 
         margin: 5px; 
      } 
   </style> 
</head>
<body>  
   <h3>Use <i>userSelect property</i> to set whether the text of an element can be selected or not</h3>  
   <div id = "div">This is a div 
      <p id = "para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, nesciunt. Ullam corporis eaque culpa, corrupti earum aut perferendis rerum sequi!</p> 
   </div> 
   <button id = "btn"> Apply </button>  
   <script>  
      document.getElementById("btn").addEventListener("click", Apply);  
      function Apply(){ 
         document.getElementById("para").style.userSelect="none"; 
         document.getElementById("para").style.color="#949494"; 
      }  
   </script>  
</body> 
</html>

在上面的例子中，用户可以看到我们使用了 userSelect 属性来设置段落中的文本在单击按钮后不可选择。

示例 3

在下面的例子中，我们添加了四个单选按钮，它们是 userSelect 属性的值。选择任何单选按钮后，userSelect 属性将应用于 div 容器中的文本。

<html> 
<head> 
   <style> 
      #container{ 
         padding: 2%; 
         border: 2px dotted purple; 
         width: 500; 
         text-align: center; 
         margin: 5px; 
      } 
   </style>  
</head> 
<body>
   <h3>Use <i>userSelect</i> property to set whether the text of an element can be selected or not</h3> 
   <div id = "container">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, voluptatem velit! Magni eligendi quibusdam distinctio, temporibus ad beatae? Quas, reiciendis.</div>  
   <br> 
   Apply userSelect with one of the following values and try to select the above text:  
   <br>  
   <input type = "radio" name = "radio_btn" id = "Auto" value = "auto" onchange = "selected()"/> 
   <label for = "Auto"> auto </label> <br> 
   <input type = "radio" name = "radio_btn" id = "None" value = "none" onchange = "selected()"/> 
   <label for = "None"> none </label> <br> 
   <input type = "radio" name = "radio_btn" id = "Text" value = "text" onchange = "selected()"/> 
   <label for = "Text"> text </label> <br> 
   <input type = "radio" name = "radio_btn" id = "All" value = "all" onchange = "selected()"/> 
   <label for = "All"> all </label> <br>  
   <script>  
      var element = document.getElementById("container");  
      function selected(){ 
         var radio_selected = document.querySelector( 'input[name="radio_btn"]:checked');    
         element.style.userSelect = radio_selected.value; 
         if(radio_selected.value == "none"){ 
            element.style.color = "#949494"; 
         } 
      }  
   </script> 
</body> 
</html>

在上面的例子中，用户可以看到我们为 userSelect 应用了“all”属性值。这有助于我们选择文本。使用属性的“all”值，我们只需单击一次即可选择文本。

在本教程中，我们学习了如何使用 JavaScript 设置元素文本的可选择性。

更新于：2022年10月12日

浏览量：175

启动你的职业生涯

完成课程获得认证

开始学习
广告