JavaScript

What is onblur Event in JavaScript and How to Use it

In JavaScript, the “form” events offer the most commonly used built-in “onblur” event. It triggers when an element loses focus. It works on all types of HTML elements except the <html>, <title>, <base>, <style>, <head>, <body>, <script>, <iframe>, <meta>, <br>, <bdo>, and <param> elements. The “onblur” is one of the significant form events that is supported by JavaScript. It is mostly used with the HTML input field for the validation of forms.

This post explains the objective, working, and usage of the “onblur” event in JavaScript.

How Does “onblur Event” Work in JavaScript?

The “onblur” event is triggered when the particular HTML element gets out of focus. Also, it invokes the execution of the associated JavaScript function.

Syntax

element.onblur = function(){myScript};

In the above syntax:

  • element: It denotes the HTML elements.
  • function(): It corresponds to the function that needs to be invoked upon the event trigger.
  • myScript: It refers to the function definition to perform the specific task when the “onblur” event occurs.

How to Use an “onblur Event” in JavaScript?

The “onblur” event can be utilized in different ways in JavaScript. This section carries out various tactical examples to illustrate its usage.

Example 1: Triggering the onblur Event Via Alert Box

In this example, an alert box can be displayed upon the “onblur” being triggered via a user-defined function.

HTML Code

First, have a look at the following HTML code:

<h2> onblur Event In JavaScript</h2>

<p> Click outside from the input field to lose focus(onblur).</p>

Name: <input type="text" id="pass1" placeholder="Enter your name">

In the above HTML code:

  • First, add a subheading of level 2 via the “<h2>” tag.
  • Next, include a paragraph using the “<p>” tag.
  • Finally, a “<input>” field is defined by the label “Name”, content-type “text”, associated id “pass1”, and the stated placeholder.

JavaScript Code

Now, let’s move on to the JavaScript code block:

<script>

document.getElementById("pass1").onblur = function() {demo()};

function demo() {

alert("Input field lost focus.");

}

</script>

In the above code snippet:

  • The “document.getElementById()” method fetches the input field via its id, triggers the “onblur” event and so the JavaScript function “demo()” becomes invoked.
  • The function “demo()” is declared to display the “alert” box when the “onblur” event triggers.

Output

The output shows that when the mouse clicks outside from the input field, the “alert” box pops up displaying the stated message.

Example 2: Triggering the onblur Event by Changing the Input Text Field Color

This example triggers the discussed event by changing the input text field with the help of a user-defined function.

HTML Code

Firstly, overview the following HTML code:

<h2> onblur Event In JavaScript</h2>

<p> Click outside from the input field to lose focus(onblur) .</p>

Name: <input type="text" id="demo" placeholder="Enter your name" onblur="func()">

The HTML code description is here:

  • The “<h2>” defines the first subheading.
  • The “<p>” tag creates a paragraph.
  • After that, the “<input>” field is labeled “Name”, content-type as “text”, associated id as “demo”, and the stated placeholder.
  • Also, the “onblur” event is specified to redirect to the function named “func()”.

JavaScript Code

Next, overview of the JavaScript code:

<script>

function func() {

document.getElementById("demo").style.background = "pink";

}

</script>

In the above lines of code:

  • A function named “func()” is defined.
  • In the function definition, the “document.getElementById()” method fetches the paragraph via its id and applies the “style.background” property.
  • It is such that the background color of the input field changes upon the “onblur” event trigger.

Output

The output verifies that when the “onblur” event triggers, the background color of the given input field changes.

Conclusion

JavaScript provides the “onblur” event that is triggered when the associated HTML element moves out of it i.e., loses focus. It is the inverse of the “onfocus” event that triggers when the element gets focused. Moreover, it can be associated with the JavaScript function to perform the desired task upon being triggered. This guide briefly explained the purpose, working, and usage of the “onblur” event in JavaScript.

About the author

Talha Saif Malik

Talha is a contributor at Linux Hint with a vision to bring value and do useful things for the world. He loves to read, write and speak about Linux, Data, Computers and Technology.