Fortunately, there are functions that can help you on how to clear text selection using JavaScript. We will help you to do this using two different functions. Each way is somehow easy, so feel free to decide between options.
Clear text selection using JavaScript
Using getSelection() and removeAllRanges()
Syntax:
window.getSelection().removeAllRanges()
The getSelection() function method returns a Selection object that can help you find the text selection of the current window which users are selecting. Its syntax and usage are defined above. The removeAllRanges() method will help you clear text selection by removing all ranges from the selection. By calling these two methods respectively on a window object, you can easily achieve the task:
<html>
<body>
<p> Select anything in this document and then press the button below to clear selection</p>
<button onclick = "window.getSelection().removeAllRanges()">LearnShareIT</button>
</body>
</html>Output:
undefinedYou can easily see how it works by clicking the button Execute code (
) in our editor above. As you can see, this method will clear the text selection which you have selected when clicking the button. However, this method removeAllRanges() doesn’t work in some browsers, such as Safari. If you want to support all browsers, you should read the next solution instead.
Using selection and empty()
In Internet Explorer, the selection property of the HTML document is considered the result of the function windows.getSelection() as in the previous approach. Therefore, you can use the document.selection to get the selected text in the page:
document.selection.empty()
<html>
<body>
<p> Select anything in this document and then press the button below to clear selection</p>
<button onclick = "document.selection.empty()">LearnShareIT</button>
</body>
</html>
Output:
undefined
You can easily see how it works by clicking the button Execute code () in our editor above. The attribute document.selection only works in Internet Explorer browser only, and the removeAllRanges() method does not work on Safari browser, so we suggest you use the empty() method in the following example to support all browsers:
<html>
<body>
<p> Select anything in this document and then press the button below to clear selection</p>
<button onclick = "(window.getSelection ? window.getSelection() : document.selection).empty()">LearnShareIT</button>
</body>
</html>Result:
Click “Execute code” to run the code in any browser you want, and you can see how it works.
The fact is, the first solution will give you a general look about how to clear text selection using JavaScript. The second approach deals with some browsers that do not support the first solution and therefore provide an overall approach that is a combination of two solutions in order to make your code run on every browser.
Summary
We have found out how to clear text Sselection using JavaScript using two different ways. Although there are many methods to do this, we suggest you use the second solution as it works for every browser.
Maybe you are interested:
- Check if a Div contains specific Text using JavaScript
- Clear the Value of a Textarea using JavaScript
- Change the Text of a Label element using JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
