HTML DOM onblur Event

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: In this example, we will see the onblur event using HTML. An alert popup is shown when the element loses focus

html

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

Output:

Example: In this example, we will see the onblur event using Javascript. An alert popup is shown when the element loses focus

html

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

Output:

Example: In this example, we will see the onblur event using the addEventListener() method in Javascript. An alert popup is shown when the element loses focus.

html

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

Output:

We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.

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

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

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.