JAVASCRIPT
Programmatically Manage Element Focus and Blur
Control user interaction flow and improve accessibility by programmatically setting and removing focus on form inputs or interactive elements.
function focusElement(selector) {
const element = document.querySelector(selector);
if (element && typeof element.focus === 'function') {
element.focus();
console.log(`Element focused: ${selector}`);
} else {
console.warn(`Could not focus element: ${selector}. Element not found or not focusable.`);
}
}
function blurElement(selector) {
const element = document.querySelector(selector);
if (element && typeof element.blur === 'function') {
element.blur();
console.log(`Element blurred: ${selector}`);
} else {
console.warn(`Could not blur element: ${selector}. Element not found or not blurrable.`);
}
}
// Example Usage:
// <input type="text" id="usernameInput" placeholder="Enter username">
// <button onclick="focusElement('#usernameInput')">Focus Username</button>
// <button onclick="blurElement('#usernameInput')">Blur Username</button>
// Auto-focus an element on page load
// document.addEventListener('DOMContentLoaded', () => focusElement('#usernameInput'));
How it works: The `.focus()` method programmatically sets focus on a specified DOM element, typically an input, button, or anchor tag, making it active for user interaction (e.g., typing into a text field). Conversely, the `.blur()` method removes focus from an element. These methods are crucial for enhancing user experience, guiding users through forms, or implementing custom accessibility features, ensuring the correct element receives keyboard input or screen reader attention.