Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML onblur Event Attribute
The onblur event attribute in HTML is triggered when an element loses focus. This commonly occurs when a user clicks away from an input field, button, or other focusable element, or when they press the Tab key to navigate to another element.
Syntax
Following is the syntax for the onblur event attribute −
<tagname onblur="script">Content</tagname>
The script parameter contains JavaScript code that executes when the element loses focus.
Common Use Cases
The onblur event is commonly used in the following scenarios −
Form validation − Validate input fields when users move to the next field
Data saving − Auto-save content when users finish editing
UI feedback − Hide tooltips or suggestions when focus is lost
Format correction − Format phone numbers, dates, or other data after input
Example − Input Field Validation
Following example demonstrates onblur event with input field validation −
<!DOCTYPE html>
<html>
<head>
<title>Onblur Input Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration Form</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" onblur="validateUsername()" placeholder="Enter username">
<span id="usernameMsg" style="color: red; margin-left: 10px;"></span><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" onblur="validateEmail()" placeholder="Enter email">
<span id="emailMsg" style="color: red; margin-left: 10px;"></span><br><br>
<input type="submit" value="Register" style="background: #007bff; color: white; padding: 8px 16px; border: none; border-radius: 4px;">
</form>
<script>
function validateUsername() {
var username = document.getElementById("username").value;
var msg = document.getElementById("usernameMsg");
if (username.length < 3) {
msg.innerHTML = "Username must be at least 3 characters";
msg.style.color = "red";
} else {
msg.innerHTML = "Valid username";
msg.style.color = "green";
}
}
function validateEmail() {
var email = document.getElementById("email").value;
var msg = document.getElementById("emailMsg");
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
msg.innerHTML = "Please enter a valid email";
msg.style.color = "red";
} else {
msg.innerHTML = "Valid email";
msg.style.color = "green";
}
}
</script>
</body>
</html>
When you click away from each input field, the onblur event triggers validation and displays feedback messages.
Example − Button Focus and Blur
Following example shows onblur event with button elements −
<!DOCTYPE html>
<html>
<head>
<title>Button Onblur Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Button Focus Demo</h2>
<button id="myButton" onblur="handleBlur()" onclick="handleClick()"
style="background: #28a745; color: white; padding: 12px 24px; border: none; border-radius: 4px; font-size: 16px; cursor: pointer;">
Click me and then click elsewhere
</button>
<br><br>
<p id="message" style="font-size: 18px; color: #333;">Click the button and then click somewhere else to see the blur event.</p>
<script>
function handleClick() {
document.getElementById("message").innerHTML = "Button clicked! Now click elsewhere to trigger blur event.";
document.getElementById("message").style.color = "blue";
}
function handleBlur() {
document.getElementById("message").innerHTML = "Button lost focus (blur event triggered)";
document.getElementById("message").style.color = "red";
}
</script>
</body>
</html>
The button shows different messages when clicked and when it loses focus.
Example − Auto-Format Phone Number
Following example demonstrates using onblur to format a phone number input −
<!DOCTYPE html>
<html>
<head>
<title>Auto-Format Phone Number</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Information</h2>
<form>
<label for="phone">Phone Number:</label><br>
<input type="text" id="phone" onblur="formatPhone()" placeholder="Enter 10-digit phone number" style="padding: 8px; width: 250px;">
<br><br>
<p id="phoneStatus" style="color: #666;">Enter your phone number and click away to auto-format.</p>
</form>
<script>
function formatPhone() {
var phoneInput = document.getElementById("phone");
var phone = phoneInput.value.replace(/\D/g, ''); // Remove non-digits
var status = document.getElementById("phoneStatus");
if (phone.length === 10) {
// Format as (XXX) XXX-XXXX
var formatted = phone.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
phoneInput.value = formatted;
status.innerHTML = "Phone number formatted successfully";
status.style.color = "green";
} else if (phone.length > 0) {
status.innerHTML = "Please enter a 10-digit phone number";
status.style.color = "red";
}
}
</script>
</body>
</html>
When you enter a 10-digit number and click away, the onblur event automatically formats it as (XXX) XXX-XXXX.
Elements Supporting Onblur
The onblur event attribute works with the following HTML elements −
Form elements −
<input>,<textarea>,<select>Interactive elements −
<button>,<a>(with href)Any element with tabindex − Elements made focusable with
tabindexattribute
Onblur vs Onfocusout
Both events trigger when an element loses focus, but they differ in event bubbling behavior −
| onblur | onfocusout |
|---|---|
| Does not bubble up to parent elements | Bubbles up to parent elements |
| Supported in all browsers | Newer event, better for event delegation |
| Traditional HTML attribute | Modern DOM event |
Conclusion
The onblur event attribute is essential for creating interactive web forms and user interfaces. It enables real-time validation, data formatting, and user feedback when elements lose focus. Use onblur to enhance user experience by providing immediate feedback and maintaining data integrity in web forms.
340 Views
