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:
- Detect if a Browser tab has Focus using JavaScript
- Create an Element with Style attribute in JavaScript
- Clone an Element and change its ID using JavaScript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java
