Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
JavaScript code to de-select text on HTML page.
In JavaScript, you can deselect or clear text selections on an HTML page using the window.getSelection().removeAllRanges() method. This is useful for creating interactive interfaces where you want to programmatically clear user text selections.
The Selection API
The Selection API provides methods to work with text selections in the browser. The window.getSelection() object represents the current text selection, and removeAllRanges() clears all selected ranges.
Syntax
window.getSelection().removeAllRanges();
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deselect Text Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.content {
font-size: 18px;
color: #333;
margin: 20px 0;
line-height: 1.5;
}
.btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Text Deselection Demo</h1>
<div class="content">
This is some sample text that you can select. Try selecting any portion of this text
and then click the button below to clear the selection. You can select text across
multiple lines to see how the deselection works.
</div>
<button class="btn" onclick="deselectText()">Clear Selection</button>
<p><strong>Instructions:</strong> Select some text above and click the button to deselect it.</p>
<script>
function deselectText() {
// Clear all text selections
window.getSelection().removeAllRanges();
console.log("Text selection cleared");
}
</script>
</body>
</html>
Alternative Methods
You can also use different approaches to achieve the same result:
<script>
// Method 1: Using removeAllRanges (recommended)
function clearSelection1() {
window.getSelection().removeAllRanges();
}
// Method 2: Using empty() if available
function clearSelection2() {
if (window.getSelection().empty) {
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) {
window.getSelection().removeAllRanges();
}
}
// Method 3: Cross-browser compatible version
function clearSelectionCrossBrowser() {
if (window.getSelection) {
if (window.getSelection().empty) {
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) {
window.getSelection().removeAllRanges();
}
} else if (document.selection) {
// For older IE versions
document.selection.empty();
}
}
</script>
Common Use Cases
- Clearing selections when switching between different UI modes
- Preventing text selection interference in interactive applications
- Resetting selection state after copy/paste operations
- Creating cleaner user interfaces by removing unwanted selections
Browser Compatibility
The window.getSelection().removeAllRanges() method is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older Internet Explorer versions, use document.selection.empty().
Conclusion
Use window.getSelection().removeAllRanges() to programmatically clear text selections on web pages. This method provides a simple and effective way to manage user text selections in interactive web applications.
184 Views
