JavaScript focus() Method
last modified April 2, 2025
In this article, we explore the element.focus() method in
JavaScript. This method is essential for form handling and user experience,
allowing developers to control focus programmatically.
Basic Definition
The focus() method sets focus on the specified element, if it can
be focused. This is commonly used with form elements like input, select, and
button elements.
When an element receives focus, it becomes the active element on the page. This means keyboard events will be directed to this element by default. Not all elements can receive focus - only interactive elements.
Basic focus() Example
This example demonstrates how to set focus on an input field when the page loads.
<!DOCTYPE html>
<html>
<head>
<title>Basic focus() Example</title>
</head>
<body>
<input type="text" id="username" placeholder="Enter your name">
<script>
window.onload = function() {
const input = document.getElementById('username');
input.focus();
};
</script>
</body>
</html>
In this basic example, we have a text input field. When the page loads, the
JavaScript code uses getElementById to find the input and calls
focus() on it.
This demonstrates the fundamental usage of focus() to improve user
experience by automatically focusing the first input field. The cursor will
appear in the input field immediately.
Focus After Button Click
This example shows how to move focus to another element after a button click.
<!DOCTYPE html>
<html>
<head>
<title>Focus After Click</title>
</head>
<body>
<input type="text" id="firstInput" placeholder="First field">
<button id="myButton">Click to focus next field</button>
<input type="text" id="secondInput" placeholder="Second field">
<script>
const button = document.getElementById('myButton');
const secondInput = document.getElementById('secondInput');
button.addEventListener('click', function() {
secondInput.focus();
});
</script>
</body>
</html>
Here we have two input fields and a button. When the button is clicked, the
event listener moves focus to the second input field using focus().
This demonstrates how focus() can be used to guide users through
form fields in a specific order. It's particularly useful for multi-step forms.
Focus With Validation
This example demonstrates using focus() to highlight invalid form inputs.
<!DOCTYPE html>
<html>
<head>
<title>Focus With Validation</title>
<style>
.invalid { border: 2px solid red; }
</style>
</head>
<body>
<input type="email" id="email" placeholder="Enter your email">
<button id="submitBtn">Submit</button>
<script>
const emailInput = document.getElementById('email');
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', function() {
if (!emailInput.value.includes('@')) {
emailInput.classList.add('invalid');
emailInput.focus();
alert('Please enter a valid email address');
} else {
alert('Form submitted successfully!');
}
});
</script>
</body>
</html>
In this example, we validate an email input when the submit button is clicked. If the validation fails, we add an 'invalid' class and focus the input field.
This shows how focus() can improve form usability by directing
users to fields that need correction. The visual feedback helps users quickly
identify and fix errors.
Focus in Modal Dialogs
This example shows how to manage focus when opening a modal dialog.
<!DOCTYPE html>
<html>
<head>
<title>Modal Focus</title>
<style>
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: white;
border: 1px solid #ccc;
z-index: 100;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<button id="openModal">Open Modal</button>
<div class="overlay" id="overlay"></div>
<div class="modal" id="modal">
<h2>Modal Dialog</h2>
<input type="text" id="modalInput">
<button id="closeModal">Close</button>
</div>
<script>
const openBtn = document.getElementById('openModal');
const overlay = document.getElementById('overlay');
const modal = document.getElementById('modal');
const closeBtn = document.getElementById('closeModal');
const modalInput = document.getElementById('modalInput');
openBtn.addEventListener('click', function() {
overlay.style.display = 'block';
modal.style.display = 'block';
modalInput.focus();
});
closeBtn.addEventListener('click', function() {
overlay.style.display = 'none';
modal.style.display = 'none';
openBtn.focus();
});
</script>
</body>
</html>
This example creates a modal dialog that appears when a button is clicked. The focus is automatically moved to an input field inside the modal when it opens.
When the modal closes, focus returns to the original button. This demonstrates proper focus management for accessibility and keyboard navigation in modal dialogs.
Focus Trap for Accessibility
This example shows how to create a focus trap for better accessibility.
<!DOCTYPE html>
<html>
<head>
<title>Focus Trap</title>
<style>
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: white;
border: 1px solid #ccc;
z-index: 100;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<button id="openModal">Open Modal</button>
<div class="overlay" id="overlay"></div>
<div class="modal" id="modal">
<h2>Accessible Modal</h2>
<input type="text" id="firstField" placeholder="First field">
<input type="text" id="secondField" placeholder="Second field">
<button id="modalClose">Close</button>
</div>
<script>
const openBtn = document.getElementById('openModal');
const overlay = document.getElementById('overlay');
const modal = document.getElementById('modal');
const closeBtn = document.getElementById('modalClose');
const firstField = document.getElementById('firstField');
const secondField = document.getElementById('secondField');
let focusableElements;
let firstFocusable;
let lastFocusable;
openBtn.addEventListener('click', function() {
overlay.style.display = 'block';
modal.style.display = 'block';
firstField.focus();
// Get all focusable elements
focusableElements = modal.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
firstFocusable = focusableElements[0];
lastFocusable = focusableElements[focusableElements.length - 1];
});
modal.addEventListener('keydown', function(e) {
if (e.key === 'Tab') {
if (e.shiftKey) {
if (document.activeElement === firstFocusable) {
e.preventDefault();
lastFocusable.focus();
}
} else {
if (document.activeElement === lastFocusable) {
e.preventDefault();
firstFocusable.focus();
}
}
}
});
closeBtn.addEventListener('click', function() {
overlay.style.display = 'none';
modal.style.display = 'none';
openBtn.focus();
});
</script>
</body>
</html>
This advanced example creates a proper focus trap for modal dialogs. When the modal is open, the Tab key cycles through only the modal's focusable elements.
This implementation is important for accessibility, ensuring keyboard users can't accidentally tab out of the modal. The focus is trapped until the modal is explicitly closed.
Source
In this article, we have shown how to use the focus() method in
JavaScript. This method is fundamental for form handling and creating accessible
web interfaces.
Author
List all JS DOM tutorials.