Open In App

HTML DOM onfocusout Event

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML DOM onfocusout event occurs when an element is losing focus. The onfocusout is the same as onblur, the only difference is that the onblur event does not bubble. If you want to determine whether an element or its child loses focus, use the onfocusout event. The onfocusin event is the opposite of the onfocusout event.

Note: Firefox does not support the onfocusout event but with the help of capturing listeners you can find out whether a child of an element loses the focus. 

Supported Tags: It supports ALL HTML elements, EXCEPT:

  •  <base>
  • <bdo>
  • <br>
  • <head>
  • <html>
  • <iframe>
  • <meta>
  • <param>
  • <script>
  • <style>
  •  <title>

Syntax:

In HTML: 

<element onfocusout="myScript">

In JavaScript (may not work as expected in Chrome, Safari and Opera 15+): 

object.onfocusout = function(){myScript};

In JavaScript, using the addEventListener() method: 

object.addEventListener("focusout", myScript);

Example: Using HTML 

HTML




<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>
              HTML DOM onfocusout event
          </h2>
        Email:
        <input type="email" id="email"
               onfocusout="gfgFun()">
 
        <script>
            function gfgFun() {
                let x =
                    document.getElementById("email");
                alert("Focus out");
            }
        </script>
    </center>
</body>
 
</html>


Output: 

 

Example: Using JavaScript 

HTML




<!DOCTYPE html>
<html>
 
<body>
 
    <center>
        <h1 style="color:green">
              GeeksforGeeks
          </h1>
        <h2>
              HTML DOM onfocusout event
          </h2>
        Email:
        <input type="email" id="email">
 
        <script>
            document.getElementById(
                "email").onfocusout =
                function () {
                    gfgFun()
                };
 
            function gfgFun() {
                alert("Focus out");
            }
        </script>
    </center>
</body>
 
</html>


Output: 

 

Example: Using the addEventListener() method: 

HTML




<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1 style="color:green">
              GeeksforGeeks
          </h1>
        <h2>
              HTML DOM onfocusout event
          </h2>
        Email:
        <input type="email" id="email">
 
        <script>
            document.getElementById(
                "email").addEventListener(
                "focusout", gfgFun);
 
            function gfgFun() {
                alert("Input field lost focus.");
            }
        </script>
    </center>
</body>
 
</html>


Output:

 

Supported Browsers: The browsers supported by HTML DOM onfocusout Event are listed below: 

  • Google Chrome
  • Internet Explorer
  • Firefox 52.0
  • Apple Safari
  • Opera


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