The DOM Style UserSelect Property is used to set or return whether the text can be selected by the user or not.
Syntax:
- It is used to return the property:
object.style.userSelect
- It is used to set the property:
object.style.userSelect = "auto|none|text|all"
Properties :
- auto: It has the default value i.e. the user can select the text.
- none: It is used to prevent text selection from the user means user can’t select the text on its own.
- text: This property enable the user to select the text. It does not provide prevent text selection from the user.
- all: It is used to selected the text with just one-click of a mouse instead of a double-click.
Return Values: It returns a string value which represents whether the text of an element can be selected.
Example-1:
html
<!DOCTYPE html><html>
<head>
<title> DOM Style user-select property</title>
<style>
div {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
h1,
h3 {
color: green;
font-size: 30px;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>DOM Style UserSelect Property</h3>
<div id="GFG">GeeksforGeeks:
A computer science portal for geeks</div>
<br>
<button onclick="myGeeks()">Submit</button>
<script>
function myGeeks() {
var x = document.getElementById("GFG");
// Chrome, Safari, Opera
x.style.WebkitUserSelect = "none";
// Firefox
x.style.MozUserSelect = "none";
// IE 10+
x.style.msUserSelect = "none";
// Standard syntax
x.style.userSelect = "none";
}
</script>
</body>
</html>
|
Output :
- Before Clicking On Button:
- After Clicking On Button:
Example-2:
html
<!DOCTYPE html><html>
<head>
<title> DOM Style user-select property</title>
<style>
h1,
h3 {
color: green;
font-size: 30px;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>DOM Style UserSelect Property</h3>
<div id="GFG" style="user-select:auto;">
GeeksforGeeks: A computer science portal for geeks
</div>
<br>
<button onclick="myGeeks()">Submit</button>
<script>
function myGeeks() {
alert(document.getElementById(
"GFG").style.userSelect);
}
</script>
</body>
</html>
|
Output:
- Before Clicking On Button:
- After Clicking On Button:
Note: The double-click on some text will be selected/highlighted but this property can be used to prevent this.
Supported Browser: The browser supported by DOM Style UserSelect are listed below:
- Google Chrome 54 and above
- Edge 79 and above
- Internet Explorer 10 and above
- Firefox 69 and above
- Opera 41 and above
- Safari 3 and above