Skip to content
Related Articles

Related Articles

Implement a JavaScript when an element loses focus
  • Last Updated : 24 Jun, 2019

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.

  • onblur Event:
    This event happens when an element is going to lose focus.

    Syntax:

    • In HTML:
      <element onblur="script">
      
    • In JavaScript:



      object.onblur = function(){script};
      
    • In JavaScript, with the addEventListener() method:
      object.addEventListener("blur", script);
      
  • 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 1: This example adds an onblur event to the <input> element and when it happens the specified code runs.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Run JavaScript when an element loses focus.
    </title>
</head>
  
<body style="text-align:center;" 
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px;
              font-weight: bold;">
    </p>
    <input type="text" 
           name="input" 
           value="inputElement" 
           onblur="gfg_Run();" />
    <br>
    <br>
    <p id="GFG_DOWN" 
       style="color:green; 
              font-size: 20px;
              font-weight: bold;">
    </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>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example adds an onfocusout event to the <input> element and when it happens the specified code runs.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Run JavaScript when an element loses focus.
    </title>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px;
              font-weight: bold;">
    </p>
    <input type="text" 
           name="input" 
           value="inputElement"
           onfocusout="gfg_Run();" />
    <br>
    <br>
    <p id="GFG_DOWN" 
       style="color:green; 
              font-size: 20px;
              font-weight: bold;">
    </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>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:
My Personal Notes arrow_drop_up
Recommended Articles
Page :