Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Implement a JavaScript when an element loses focus
When we click the input element in HTML, it sets the outline for the input element, focusing on it. Sometimes, we must execute some JavaScript code when the user loses focus from the input element.
For example, We can autofocus the input element when the user refreshes the web page using the HTML’s ‘autoFocus’ attribute. After that, we can execute the JavaScript function when an element loses focus to ensure that the input value is not empty. If the input value is empty, and the element loses focus, we can show the error message like ‘This field is required’.
Here, we will learn different approaches to implementing JavaScript when an element loses focus.
Use the onblur event attribute
The onblur event attribute is used to trigger the blur event. When the element loses the focus, HTML triggers the input element's blur event.
Syntax
Users can follow the syntax below to implement JavaScript to element loses the focus using the onblur event attribute.
<input type = "text" autofocus onblur = "function_name()">
In the above syntax, function_name is the function's name to execute when the element loses focus.
Example
In the example below, we have created the text input. Also, we have used the ‘autoFocus’ attribute to focus on the input element when the user refreshes the web page.
We have created the executeJS() function printing the message like ‘function is executed’. We used the onblur event attribute to call the executeJS() function. So, whenever input loses focus, it will call the executeJS() function, which users can observe in the output.
<html>
<body>
<h3> Using the <i> onblur event </i> to execute JavaScript code when element loses the focus </h3>
<p> First click inside the input element and then click outsite the input element</p>
<input type = "text" autofocus onblur = "executeJS()">
<div id = "content"></div>
<script>
let content = document.getElementById('content');
function executeJS() {
content.innerHTML = "executeJS() function executed after input element lose the focus."
}
</script>
</body>
</html>
Use the onfocusout event attribute
The ‘onfocusout’ event attribute works the same as the ‘onblur’ event attribute. When the ‘focusout’ event triggers, the ‘onfocusout’ event attribute executes the JavaScript script.
Syntax
Users can follow the syntax below to use the ‘onfocusout’ event attribute to implement JavaScript when the input element loses focus.
<input type = "text" onfocusout = "func1()" onfocus = "func2()">
In the above syntax, when we focus on the input element, it executes the func2() function, and when the element loses focus, it executes the func1() function.
Example
In the example below, we have added the ‘onfocus’ and ‘onfocusout’ event attribute to execute different functions when the user focus and unfocuses the element. We invoke the focusFunc() function when the user focuses on the input element, and executeFunc() function when the user removes the focus from the input element.
<html>
<body>
<h3> Using the <i> onfocusout event </i> to execute JavaScript code when element loses the 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 the focus.";
}
function focusFunc() {
content.innerHTML = "Element is focused currently.";
}
</script>
</body>
</html>
Example
In the example below, we have used the addEventListner() method to detect the event on the input element. We have accessed the input element using id and added ‘focus’ and ‘focusout’ events. When the user focuses on the input element, HTML triggers the ‘focus’ event and executes the focusFunc() function. When the user removes the focus from the input element, it triggers the ‘focusout’ event and executes the printMessage() function.
<html>
<body>
<p>Using the <i> focusout event with addEventListner() method </i> to execute JavaScript code when element loses the focus </p>
<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);
// code to execute after the element loses the focus
function printMessage() {
content.innerHTML = "Function executed after element loses the focus";
}
// function to execute when an element is focused.
function focusFunc() {
content.innerHTML = "Element is focused right now.";
}
</script>
</body>
</html>
In this tutorial, we learned to implement JavaScript script when the element loses its focus. We used the ‘blur’ and ‘focusout’ events to execute the JavaScript function when the user removes the focus from the element.
862 Views
