資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用 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 設定元素文字是否可選擇。
175 次檢視
