Implement a JavaScript when an element loses focus

0 0 1 minute read

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;"> 
    zambiatek 
</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;"> 
    zambiatek 
</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>