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