How To Clear Text Selection Using JavaScript

How to Clear Text Selection using JavaScript

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: 

undefined

You 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:

Leave a Reply

Your email address will not be published. Required fields are marked *