Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Implement a JavaScript when an element loses focus
When we click on an input element in HTML, it becomes focused and displays an outline. Sometimes, we need to execute JavaScript code when the user moves focus away from an element (when it loses focus).
For example, you can validate form fields when users click outside an input, showing error messages like "This field is required" if the input is empty. This is commonly used for real-time form validation.
Here, we will learn different approaches to implement JavaScript when an element loses focus.
Using the onblur Event Attribute
The onblur event attribute triggers when an element loses focus. It's the most straightforward way to handle focus loss events.
Syntax
<input type="text" onblur="functionName()">
Example
In this example, we create a text input with the autofocus attribute. When the user clicks outside the input, the executeJS() function runs and displays a message.
<html>
<body>
<h3>Using the <i>onblur event</i> to execute JavaScript when element loses focus</h3>
<p>Click inside the input element, then click outside to see the result</p>
<input type="text" autofocus onblur="executeJS()" placeholder="Click outside to lose focus">
<div id="content"></div>
<script>
let content = document.getElementById('content');
function executeJS() {
content.innerHTML = "executeJS() function executed after input element lost focus.";
}
</script>
</body>
</html>
Using the onfocusout Event Attribute
The onfocusout event attribute works similarly to onblur but provides more flexibility. It bubbles up through the DOM, making it useful for event delegation.
Syntax
<input type="text" onfocusout="func1()" onfocus="func2()">
Example
This example demonstrates both focus and focusout events. The message changes when you focus on the input and when you click outside it.
<html>
<body>
<h3>Using the <i>onfocusout event</i> to execute JavaScript when element loses focus</h3>
<input type="text" autofocus onfocusout="executeFunc()" onfocus="focusFunc()" placeholder="Click outside to remove focus">
<div id="content"></div>
<script>
let content = document.getElementById('content');
function executeFunc() {
content.innerHTML = "executeFunc() function executed after input element loses focus.";
}
function focusFunc() {
content.innerHTML = "Element is focused currently.";
}
</script>
</body>
</html>
Using addEventListener() Method
The addEventListener() method provides the most control and is the modern approach for handling events. It allows you to attach multiple event listeners and remove them when needed.
Example
This example uses addEventListener() to attach both 'focus' and 'focusout' events to the input element. This approach is more flexible and follows modern JavaScript practices.
<html>
<body>
<h3>Using <i>focusout event with addEventListener()</i> to execute JavaScript when element loses focus</h3>
<input id="inp" type="text" autofocus placeholder="Click outside to remove focus">
<div id="content"></div>
<script>
let content = document.getElementById('content');
let input = document.getElementById('inp');
input.addEventListener('focusout', printMessage);
input.addEventListener('focus', focusFunc);
function printMessage() {
content.innerHTML = "Function executed after element loses focus";
}
function focusFunc() {
content.innerHTML = "Element is focused right now.";
}
</script>
</body>
</html>
Comparison of Methods
| Method | Event Bubbling | Multiple Listeners | Modern Approach |
|---|---|---|---|
onblur |
No | No | No |
onfocusout |
Yes | No | No |
addEventListener() |
Yes | Yes | Yes |
Conclusion
Use addEventListener() with 'focusout' for modern applications, as it provides better control and flexibility. The onblur attribute is simpler but less powerful for complex scenarios.
2K+ Views
