Given a document, the task is to implement functionality when the element loses focus. We have 2 options, one is the onblur event and another is onfocusout event JavaScript. We’re going to discuss a few methods. First few methods to understand.
Approach 1: Using onblur event
JavaScript onblur Event: This event happens when an element is going to lose focus.
- In HTML
<element onfocusout="script">
- In JavaScript
object.onfocusout = function(){script}; - In JavaScript, with the addEventListener() method
object.addEventListener("blur", script);
Example 1: This example adds an onblur event to the <input> element and when it happens the specified code runs.
html
<h1 style="color:green;"> neveropen </h1> <p id="GFG_UP"> </p> <input type="text" name="input" value="inputElement" onblur="gfg_Run();" /> <p id="GFG_DOWN"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var today = 'First click inside of input'+ ' and then outside to perform event!'; el_up.innerHTML = today; function gfg_Run() { el_down.innerHTML = "Input element lost focus"; } </script> |
Output:
Implement a JavaScript when an element loses focus
Approach 2: Using onfocusout event
JavaScript onfocusout Event: This method appends a node as the last child of a node.
Syntax:
- In HTML
<element onfocusout="script">
- In JavaScript
object.onfocusout = function(){script}; - In JavaScript, with the addEventListener() method
object.addEventListener("focusout", script);
Example 2: This example adds an onfocusout event to the <input> element and when it happens the specified code runs.
html
<h1 style="color:green;"> neveropen </h1> <p id="GFG_UP"> </p> <input type="text" name="input" value="inputElement" onfocusout="gfg_Run();" /> <p id="GFG_DOWN"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var today = 'First click inside of input'+ ' and then outside to perform event!'; el_up.innerHTML = today; function gfg_Run() { el_down.innerHTML = "Input element lost focus"; } </script> |
Output:
Implement a JavaScript when an element loses focus
