Skip to main content

How to Remove Focus from an Element in JavaScript

In web development, managing keyboard focus is essential for creating an accessible and intuitive user experience. A common task is to programmatically remove focus from an element, often after a user action or to direct their attention elsewhere. This is known as "blurring" the element.

This guide will teach you how to use the standard HTMLElement.blur() method to remove focus from a specific element. We will also cover the important distinction between removing focus and disabling an element.

The Core Method: element.blur()​

The blur() method is the direct and standard way to remove keyboard focus from a DOM element. It is the programmatic equivalent of a user clicking or tabbing away from a focused element.

Problem: an element on your page has focus (e.g., from an autofocus attribute or user interaction), and you need to remove that focus.

<!-- This input will be focused on page load -->
<input type="text" id="my-input" autofocus>

Solution:

  1. Get a reference to the element.
  2. Call the .blur() method on it.
// 1. Select the element.
const myInput = document.getElementById('my-input');

// 2. Call the blur() method to remove focus.
myInput.blur();
note

After this code runs, the input field will no longer be the active element on the page.

Removing Focus from the Currently Active Element​

Sometimes you need to blur whatever element is currently focused, without knowing its specific ID or class. The document.activeElement property gives you a direct reference to the currently focused element.

Solution:

// document.activeElement is a read-only property that returns the focused element.
const currentlyFocused = document.activeElement;

// Safely call .blur() on it.
currentlyFocused?.blur();
note

Optional Chaining (?.): This is a crucial addition. It's possible that no element has focus, in which case document.activeElement might be the <body> or even null. The optional chaining operator (?.) prevents a TypeError by short-circuiting if activeElement is null or undefined, making the code robust.

This is a very useful one-liner for situations like closing a modal and wanting to ensure no element within it retains focus.

Removing focus (blur()) is different from preventing focus in the first place. If you have an element that should not be focusable via keyboard navigation (i.e., using the Tab key), you should set its tabindex attribute to -1.

Solution:

const nonTabbableButton = document.getElementById('my-button');

// This makes the element non-focusable via the Tab key.
// It can still be focused by a mouse click or programmatically with .focus().
nonTabbableButton.tabIndex = -1;

If you need to prevent an element from being focused or interacted with entirely, you should disable it.

const disabledInput = document.getElementById('my-input');

// Disabled elements cannot be focused, clicked, or submitted.
disabledInput.disabled = true;

Practical Example: Blurring an Input After Submission​

A common UI pattern is to remove focus from an input field after the user has submitted its value (e.g., by pressing "Enter"), especially on mobile devices where this will also hide the on-screen keyboard.

HTML:

<form id="comment-form">
  <input type="text" id="comment-input" placeholder="Add a comment...">
</form>

JavaScript:

const commentForm = document.getElementById('comment-form');
const commentInput = document.getElementById('comment-input');

commentForm.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent the page from reloading

  console.log('Submitted comment:', commentInput.value);
  
  // Clear the input and remove focus from it.
  commentInput.value = '';
  commentInput.blur();
});
note

Now, after the user hits "Enter," the input field will be cleared and blurred, providing a clean user experience.

Conclusion​

Managing element focus is a key part of creating a polished user interface.

  • To remove focus from a specific element, the standard and recommended method is element.blur().
  • To remove focus from whichever element is currently active, use the robust one-liner document.activeElement?.blur().
  • To prevent an element from being focusable with the keyboard, set element.tabIndex = -1.
  • To completely prevent all interaction with an element, set element.disabled = true.

Table of Contents