Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM onblur Event

  • Last Updated : 28 Jun, 2019

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

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 :