Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM onfocusout Event

  • Last Updated : 08 Aug, 2021

The HTML DOM onfocusout event occurs when an element is losing focus. The onfocusout is same as onblur, the only difference is that onblur event does not bubble.
If you want to find out whether an element or its child loses the focus, you should 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 listener you can find out whether a child of an element loses the focus or not. 
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() {
                var 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

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :