Remove the Focus From an Element Using JavaScript

While updating a web page or site, there can be an update requirement to remove the focus from element(s) in the Document Object Model(DOM). For instance, prioritizing the updated elements over the outdated ones on a web page. In such scenarios, removing the focus from an element using JavaScript is of great aid in making amendments to a site.

This blog will explain the procedure to remove the focus from an element using JavaScript.

How to Remove the Focus From an Element in JavaScript?

To remove the focus from an element in JavaScript, apply the following approaches in combination with the “blur()” method:

• “getElementById()” method.
• “activeElement” property and “optional chaining(?.)” operator.

Approach 1: Remove the Focus From an Element in JavaScript Using getElementById() Method

The “blur()” method removes the focus from the associated element, and the “getElementById()” method returns an element having the specified “id”. These methods can be applied in combination to fetch the focused element and remove the focus from it with the help of the user-defined function.

Syntax

In the given syntax:

“element” corresponds to the element that needs to be fetched against the particular “id”.

Example

Let’s overview the following example:

In the above lines of code:

• Include an “<input>” element having the stated attributes.
• The “type” attribute signifies that the element is a “radio” button. The “autofocus” is a boolean attribute that adds focus to the associated element.
• In the next step, create a button having an “onclick” event which will redirect to the function removeFocus().
• In the JS code, define a function named “removeFocus()”. In the function definition, access the contained element by its “id” using the “getElementById()” method.
• Lastly, apply the “blur()” method to the fetched element. This will resultantly remove the focus from the <input> element upon the button click.

Output

In the output, it can be seen that the focus from the radio button is omitted upon the button click.

Approach 2: Remove the Focus From an Element in JavaScript Using activeElement Property and optional chaining(?.) Operator

The “activeElement” property gives the HTML element that has focus, and the “optional chaining(?.)” operator checks for a particular condition. These approaches can be utilized in combination to apply a check upon the focused element(s) and blur them accordingly.

Example

Let’s go through the below-stated example:

In the above code snippet:

• Include two “<input>” elements having the allocated attribute “type” as a “checkbox”.
• The boolean attribute “autofocus” is allocated to the latter checkbox, as stated.
• Next, create a button having an “onclick” event accessing the function named removeFocus().
• In the JS code part, define a function named “removeFocus()”.
• In its definition, apply the combined “activeElement” property and the “optional chaining(?.)” operator to check for all of the focused element(s) within the code.
• The associated “blur()” method will blur the located focused element(s) upon the button click.

Output

In the output, the focus from the stated checkbox is removed upon the click of the button.

Conclusion

The “blur()” method combined with the “getElementById()” method or the “activeElement” property and “optional chaining(?.)” operator can be utilized to remove/omit the focus from an element in JavaScript. The former approach can be applied to get the focused element and remove the focus from it upon the button click. The latter approach can be utilized to check the focused element(s) and blur it. This write-up explains how to remove/omit focus from an element in JavaScript.