Are you ready to discover how to remove focus from an element using JavaScript?
In this article, you’ll discover how to control focus on your web pages using JavaScript.
We will explain how to use the focus() and blur() methods to set and remove the focus from HTML elements such as text fields and buttons.
So, without further ado, let’s get started!
What is the JavaScript focus() method?
The focus() method in JavaScript is used to set focus on an HTML element.
When an element is focused, it becomes the active element in the current document and will receive keyboard and similar events by default.
For example, if you have a text field or a button element, you can use the focus() method to set focus on it.
The browser may also provide a visual indication of the focused element, such as displaying a “focus ring” around it.
How to remove focus from an element using JavaScript?
To remove focus from an element in JavaScript, you can use the blur() method.
For instance, if you have an input element and you want to remove focus from it, you can call the blur() method on the element like this:
element.blur() ✅If you want to remove focus from the currently active element without selecting it, you can call the blur() method on the activeElement property of the document object like this:
document.activeElement.blur() ✅How to remove focus from textbox in JavaScript?
You can remove focus from a textbox in JavaScript by using the blur() method.
Here’s an example:
// Get the textbox element
var textbox = document.getElementById("myTextbox");
// Remove focus from the textbox
textbox.blur();In this example, we first get the textbox element using the getElementById() method. Then, we call the blur() method on the textbox element to remove focus from it.
Here’s an example code that demonstrates how to use the focus() and blur() methods in JavaScript to set and remove focus from an element:
<!DOCTYPE html>
<html>
<head>
<title>Focus and Blur Example</title>
</head>
<body>
<h1>Focus and Blur Example</h1>
<input type="text" id="myInput" value="Click me to focus">
<button onclick="myFunction()">Click me to remove focus</button>
<script>
function myFunction() {
document.getElementById("myInput").blur();✅
}
</script>
</body>
</html>
Output:
As you can see in the video above, we first click the text input field to focus, and then we stop focusing on it by clicking the “Click me to remove focus” button.
Conclusion
In conclusion, this article discusses on how to remove the focus using JavaScript.
We have explained how to use the focus() and blur() methods to set and remove focus from HTML elements such as text fields and buttons.
We have also provided examples and code snippets to demonstrate how these methods can be used in practice.
We hope this article has provided you with enough information to help you understand the JavaScript remove focus.
If you want to dive into more JavaScript topics, check out the following articles:
Thank you for reading Itsourcecoders 😊.
Official documentation
Quick step-by-step summary (click to expand)
- What is the JavaScript focus() method. Read the ‘What is the JavaScript focus() method?’ section for the details and code.
- How to remove focus from an element using JavaScript. Read the ‘How to remove focus from an element using JavaScript?’ section for the details and code.
- How to remove focus from textbox in JavaScript. Read the ‘How to remove focus from textbox in JavaScript?’ section for the details and code.
- Conclusion. Read the ‘Conclusion’ section for the details and code.
Frequently Asked Questions
Is JavaScript still worth learning in 2026?
What is the difference between var, let, and const?
Which JavaScript version should I target in 2026?
What is the best free editor for JavaScript?
How do I run JavaScript locally vs in the browser?
What can I build with JavaScript for my BSIT capstone?
Caren Bautista
Technical Writer at PIES IT Solution
Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.
Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
· View all posts by Caren Bautista →