Implement a JavaScript when an element loses focus - GeeksforGeeks

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);

Syntax:
In HTML:<element onblur="script">

<element onblur="script">

In JavaScript:object.onblur = function(){script};

object.onblur = function(){script};

In JavaScript, with the addEventListener() method:object.addEventListener("blur", script);

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);

Syntax:
In HTML:<element onfocusout="script">

<element onfocusout="script">

In JavaScript:object.onfocusout = function(){script};

object.onfocusout = function(){script};

In JavaScript, with the addEventListener() method:object.addEventListener("focusout", script);

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:
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
How to remove duplicate elements from JavaScript Array ?
How to get selected value in dropdown list using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?