---

Search posts under JavaScript:

---

Onblur in JavaScript

How to execute a JavaScript function when an element loses focus?

In case we want to execute a JavaScript function when the element loses its focus, we can follow this approach.

Enter your name:
    <input type="text" name="txtName" id="txtName" onblur="CallFunction(this.id)" />
    <input type="button" id="btn" name="btn" value="Submit" />

    <script>
        function CallFunction(id) {
            document.getElementById(id).style.background = "#c0c0c0";
        }
    </script>

In the above code snippet when the textbox lose focus, the onblur event fires and executes CallFunction. In this, we are setting the background color of the textbox to “#c0c0c0”.

OUTPUT