How To Remove The Focus From An Element Using JavaScript?

Remove the focus from an Element using JavaScript

This short tutorial will clarify how we can remove the focus from an element using JavaScript. Continue reading the article and practice by sample code.

Remove the focus from an element using JavaScript

Here are 3 simple ways we want to introduce to you in this article:

Using the blur() function

Blur is the event that occurs when the mouse pointer goes outside the object.

Syntax:

element.blur();

Description

It is used to trigger the blur event.

First, we’ll get the element we want to remove focus on. Then call the blur() function on that element, and that’s it.

Below is the sample code. Because we want to visualize it, we have written more code to countdown. You don’t have to worry too much about it. Just take care of the remove focus part.

index.html

<body>
  <main id="app">
    <h1>Remove focus in <span>3</span>s</h1>
    <input class="text" type="text" id="first_name" />
  </main>
  <script src="main.js"></script>
</body>

main.js

// Just countdown 3 seconds unrelated to focus
let countdown = setInterval(() => {
  let currentSecond = document.querySelector("span").textContent;
  document.querySelector("span").textContent = Number(currentSecond) - 1;
}, 1000);

// ------ REMOVE FOCUS ------ //

// Get input element
let input = document.querySelector(".text");

// Focus input when the page is loaded
input.focus();

// Remove focus in 3 seconds
setTimeout(() => {
  // Use blur() to remove focus
  input.blur();

  // Stop countdown
  clearInterval(countdown);
}, 3000);

Output:

Using the activeElement property

The activeElement attribute selects the currently focused element in the document.

Syntax:

document.activeElement;

Description: with no parameters, it is used to get the currently active element.

In the above way, we have to specify exactly the input element to remove focus, this time with the blur() function on the document.activeElement, we no longer need to specify the input element; document.activeElement has automatically specified the currently active element.

// Just countdown 3 seconds unrelated to focus
let countdown = setInterval(() => {
  let currentSecond = document.querySelector("span").textContent;
  document.querySelector("span").textContent = Number(currentSecond) - 1;
}, 1000);

// ------ REMOVE FOCUS ------ //

// Remove focus in 3 seconds
setTimeout(() => {
  // Get currently active Element
  let activeEl = document.activeElement;

  // Use blur() to remove focus
  activeEl.blur();

  // Stop countdown
  clearInterval(countdown);
}, 3000);

Output:

Using setAttribute() function and disabled attribute

We’ve covered the disabled attribute here and the syntax of the setAttribute() function here. You can read more.

The disabled attribute will prevent accessing the input and remove the focus of that input. We will use that to solve our problems. After the input is disabled, we will restore it to its original state by resetting the disabled attribute to false. Like this:

// Just countdown 3 seconds unrelated to focus
let countdown = setInterval(() => {
  let currentSecond = document.querySelector("span").textContent;
  document.querySelector("span").textContent = Number(currentSecond) - 1;
}, 1000);

// ------ REMOVE FOCUS ------ //

// Remove focus in 3 seconds
setTimeout(() => {
  // Get currently active Element
  let activeEl = document.activeElement;

  // Use setAttribute() to disable element
  activeEl.setAttribute("disabled", "");

  // Remove the disabled attribute
  activeEl.disabled = false;

  // Stop countdown
  clearInterval(countdown);
}, 3000);

Output:

All source code for this article is available on our GitHub page. You can check it out here.

Summary

Finally, we have learned 3 ways to remove the focus from an element using JavaScript. We recommend the second method because of the flexibility and convenience of the activeElement property. If you have any questions, please comment below.

Have a lucky day!

Maybe you are interested:

Leave a Reply

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