JavaScript Onblur

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

How to detect onfocus in JavaScript?

Use the onfocus event to detect when an element gains focus. It can be applied inline, through JavaScript, or with event listeners.

What is the difference between onfocus and onblur?

onfocus triggers when an element gains focus, while onblur triggers when an element loses focus. Both are commonly used for form interactions.

What is the lexer in JavaScript?

A lexer (lexical analyzer) in JavaScript breaks the source code into tokens, which are the smallest meaningful units, for parsing and execution.

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.