JavaScript blur() Method
last modified April 2, 2025
In this article, we explore the blur() method in JavaScript. This
method removes keyboard focus from the current element, which is essential for
creating intuitive user interfaces and form handling.
Basic Definition
The blur() method removes keyboard focus from the current element.
It is commonly used with form elements like inputs, buttons, and links to
control focus behavior programmatically.
When an element loses focus, it triggers the blur event. This
method is the programmatic equivalent of a user clicking elsewhere on the page.
Basic blur() Example
This example demonstrates how to remove focus from an input field using blur().
<!DOCTYPE html>
<html>
<head>
<title>Basic blur() Example</title>
</head>
<body>
<input type="text" id="myInput" placeholder="Click then blur">
<button onclick="removeFocus()">Remove Focus</button>
<script>
function removeFocus() {
const input = document.getElementById('myInput');
input.blur();
}
</script>
</body>
</html>
In this basic example, we have an input field and a button. When the button is
clicked, the removeFocus function is called, which uses
blur() to remove focus from the input field.
This demonstrates the fundamental usage of blur() to control focus
behavior. The method is called on the element object that currently has focus.
Form Validation with blur()
This example shows how to use blur() for form validation when leaving a field.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
.error { border: 2px solid red; }
</style>
</head>
<body>
<input type="email" id="email" placeholder="Enter email">
<p id="error" style="color:red"></p>
<script>
const emailInput = document.getElementById('email');
const errorMsg = document.getElementById('error');
emailInput.addEventListener('blur', function() {
if (!this.value.includes('@')) {
this.classList.add('error');
errorMsg.textContent = 'Please enter a valid email';
} else {
this.classList.remove('error');
errorMsg.textContent = '';
}
});
</script>
</body>
</html>
Here we validate an email input when it loses focus. The blur event
listener checks if the input contains an '@' symbol and shows an error if not.
This demonstrates how blur events can trigger validation. The
actual blur() method would be used to force validation if needed.
Preventing Focus Stealing
This example demonstrates using blur() to prevent focus stealing by popups.
<!DOCTYPE html>
<html>
<head>
<title>Prevent Focus Stealing</title>
<style>
#modal { display: none; position: fixed; top: 50%; left: 50%;
transform: translate(-50%, -50%); padding: 20px;
background: white; border: 1px solid #ccc; }
</style>
</head>
<body>
<button id="openModal">Open Modal</button>
<div id="modal">
<h3>Important Message</h3>
<p>Please read this carefully</p>
<button id="closeModal">Close</button>
</div>
<script>
const openBtn = document.getElementById('openModal');
const modal = document.getElementById('modal');
const closeBtn = document.getElementById('closeModal');
openBtn.addEventListener('click', function() {
modal.style.display = 'block';
openBtn.blur(); // Remove focus from the triggering button
});
closeBtn.addEventListener('click', function() {
modal.style.display = 'none';
});
</script>
</body>
</html>
In this example, clicking the "Open Modal" button shows a modal dialog while
using blur() to remove focus from the button. This prevents the
button from maintaining focus after opening the modal.
This technique improves accessibility by ensuring focus doesn't get "stuck" on hidden or inactive elements. It's a common pattern in modal implementations.
Custom Dropdown with blur()
This example shows how to create a custom dropdown that closes on blur.
<!DOCTYPE html>
<html>
<head>
<title>Custom Dropdown</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown" tabindex="0">
<button>Select Option</button>
<div class="dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>
<script>
const dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('blur', function() {
this.querySelector('.dropdown-content').style.display = 'none';
});
</script>
</body>
</html>
Here we create a custom dropdown menu that closes when it loses focus. The
blur event listener hides the dropdown content when focus moves
away from the dropdown container.
This demonstrates how blur events can help manage interactive
components. The tabindex attribute makes the div focusable.
Focus Management in Single Page Apps
This example shows how to use blur() for better focus management in SPAs.
<!DOCTYPE html>
<html>
<head>
<title>SPA Focus Management</title>
</head>
<body>
<nav>
<button id="home">Home</button>
<button id="about">About</button>
<button id="contact">Contact</button>
</nav>
<div id="content">Home Content</div>
<script>
const navButtons = document.querySelectorAll('nav button');
const contentDiv = document.getElementById('content');
navButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove focus from all nav buttons
navButtons.forEach(btn => btn.blur());
// Update content based on clicked button
contentDiv.textContent = `${this.textContent} Content`;
});
});
</script>
</body>
</html>
In this SPA-like example, clicking navigation buttons updates content while removing focus from all buttons. This prevents focus indicators from remaining on inactive navigation items.
This technique improves the user experience in single page applications by cleaning up focus states after navigation actions. It's particularly helpful for keyboard users.
Source
In this article, we have shown how to use the blur() method in
JavaScript. This method is essential for controlling focus behavior and creating
accessible, user-friendly interfaces.
Author
List all JS DOM tutorials.