Implement a JavaScript when an element loses focus

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.

<h1 style="color:green;">
    GeeksforGeeks
</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:

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.

<h1 style="color:green;">
    GeeksforGeeks
</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: