Skip to content
Related Articles

Related Articles

HTML | DOM onblur Event

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Jun, 2019
View Discussion
Improve Article
Save Article

The HTML DOM onblur event occurs when an object loses focus. The onblur event is the opposite of the onfocus event.
The onblur event is mostly used with form validation code (e.g. when the user leaves a form field).

Syntax:

In HTML:

<element onblur="myScript">

In JavaScript:

object.onblur = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("blur", myScript);

Example: Using HTML




<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM onblur event</h2> Email:
        <input type="email" id="email" onblur="myFunction()">
  
        <script>
            function myFunction() {
                alert("Focus lost");
            }
        </script>
    </center>
</body>
  
</html>

Output:

Example: In JavaScript:




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

Output:

Example: In JavaScript, using the addEventListener() method




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

Output:

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

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!