Open In App

Implement a JavaScript when an element loses focus

Improve
Improve
Like Article
Like
Save
Share
Report

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;">
    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:

Implement a JavaScript when an element loses focus

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;">
    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:

Implement a JavaScript when an element loses focus

Implement a JavaScript when an element loses focus



Last Updated : 19 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads