Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is onblur?
2.1.
Syntax of JavaScript onblur
2.2.
Parameters of JavaScript onblur
2.3.
Exceptions of JavaScript onblur
2.4.
Example
3.
Working with onblur
4.
Event Object and onblur
5.
Frequently Asked Questions
5.1.
What does onblur do in JavaScript?
5.2.
How does onblur differ from onfocus?
5.3.
Can I validate user input with onblur?
5.4.
What is the difference between Onblur and Onchange?
6.
Conclusion
Last Updated: Apr 29, 2024
Easy

JavaScript Onblur

Introduction

As a web developer, responding to user interactions is a big part of your job. It's not all about clicking or typing; sometimes, it's about what happens when the user stops interacting. JavaScript's onblur event can help us handle these scenarios. This article will explain what onblur is, how to use it, and provide some real-world examples.

JavaScript Onblur

What is onblur?

The onblur event in JavaScript triggers when an element loses focus. This can happen for various reasons, such as when a user clicks outside of an input field they were typing in or when they tab to another field.

Syntax of JavaScript onblur

element.onblur = function;

Parameters of JavaScript onblur

function(event)

Exceptions of JavaScript onblur

No exceptions are there in JavaScript onblur.

In the syntax for the onblur event in JavaScript, you assign a function to be executed when an element loses focus. The function specified as the event handler will be invoked when the blur event occurs on the element.

The parameter of the onblur event handler function is typically an event object, which provides information about the event that occurred. This event object can be used to access properties and methods related to the blur event.

Example

Here's a simple example of onblur in action:

document.getElementById("nameInput").onblur = function() { 
    console.log('Input field lost focus'); 
}
You can also try this code with Online Javascript Compiler
Run Code

 

In this snippet, when the user clicks or tabs away from the input field with the ID nameInput, 'Input field lost focus' is logged to the console.

Working with onblur

One of the most common uses of onblur is to validate user input as soon as they finish typing. This provides immediate feedback, which can be helpful to the user. Let's see how you could use onblur to validate an email field:

document.getElementById("emailInput").onblur = function() {
    let email = this.value;
    let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;


    if (email.match(pattern)) {
        console.log('Valid email');
    } else {
        console.log('Invalid email');
    }
}
You can also try this code with Online Javascript Compiler
Run Code

 

Here, when the user finishes typing their email and clicks or tabs away from the input field, the email is checked against a regular expression pattern. If the email is valid, 'Valid email' is logged to the console. If it's not, 'Invalid email' is logged.

Event Object and onblur

Just like any other event in JavaScript, onblur also generates an event object that holds information about the event. While it's not as commonly used with onblur as it is with other events, you can still access this object if needed.

document.getElementById("nameInput").onblur = function(event) {
    console.log('Element that lost focus: ' + event.target.id);
}
You can also try this code with Online Javascript Compiler
Run Code

 

In this example, event.target.id is used to log the ID of the element that lost focus.

Frequently Asked Questions

What does onblur do in JavaScript?

onblur is an event that triggers a function when an element loses focus.

How does onblur differ from onfocus?

onblur triggers when an element loses focus, while onfocus triggers when an element gains focus.

Can I validate user input with onblur?

Yes, you can use onblur to validate user input as soon as they finish typing.

What is the difference between Onblur and Onchange?

onblur is triggered when an element loses focus. onchange is triggered when the value of a form element changes and then loses focus. They serve different purposes in web development.

Conclusion

JavaScript's onblur event is an important tool in the toolkit of every web developer. It allows you to react when an element loses focus, enabling you to create more interactive and user-friendly web pages. Whether it's validating user input, saving data, or triggering animations, onblur offers a wealth of possibilities to enhance your site's usability. By understanding and effectively using onblur, you can take your user interactions to the next level.

Live masterclass