Remove the focus from an Element using JavaScript

# Table of Contents

# Remove the focus from an Element using JavaScript

Use the blur() method to remove the focus from an element, e.g. input.blur().

If you need to remove the focus from the currently active element without selecting it, call the blur method on the activeElement property - document.activeElement.blur().

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <input type="text" id="first_name" autofocus />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const input = document.getElementById('first_name');

// ✅ Remove focus from specific element
input.blur();

// ✅ Remove focus from the currently active element
// document.activeElement.blur();

The code for this article is available on GitHub

We selected the input element using the document.getElementById() method.

We used the HTMLElement.blur() method to remove the focus from the element.

The blur() method removes the keyboard focus from the element it was called on.

# Remove the focus from the currently active element

If you want to remove the focus from the currently active element without selecting it, call the blur() method on the document.activeElement property.

index.js

Copied!
// ✅ Remove focus from the currently active element
document.activeElement.blur();

The document.activeElement property returns the element that currently has focus.

If there is no focused element, the document.activeElement property will return the body element in most browsers, but it could also return null depending on the browser's implementation.

To avoid getting an error due to calling the blur() method on a null value, use the optional chaining (?.) operator.

index.js

Copied!
document.activeElement?.blur();

If the document.activeElement property returns null, the optional chaining operator will short-circuit returning undefined instead of calling the blur() method.

If you need to focus a different element, you can use the focus() method.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <input type="text" id="first_name" autofocus />

    <input type="text" id="country" placeholder="Country" />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const countryInput = document.getElementById('country');

countryInput.focus();

Even though the input element with id of first_name has the autofocus attribute set, we are able to change the focused element by calling the focus() method on a different element.

# Disable focus on a specific Element using JavaScript

To disable focus on a specific element, set the tabIndex property on the element to a value of -1.

The tabIndex property can be used to specify that an element cannot be focused using keyboard navigation.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" name="first_name" />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const element = document.getElementById('first_name');

element.tabIndex = '-1';

We set the element's tabindex to a value of -1.

This means that the element is not reachable via keyboard navigation, but could still be focused using JavaScript or by clicking on it with the mouse.

If you need to remove focus from a specific element, you can use the blur() method.

index.js

Copied!
const element = document.getElementById('first_name');

element.blur();

The method removes keyboard focus from the element it was invoked on.

If you need to make an element unclickable, set its disabled attribute.

index.js

Copied!
const element = document.getElementById('first_name');

element.setAttribute('disabled', '');

The code for this article is available on GitHub

When the element's disabled attribute is set, the element is not mutable or focusable.

The setAttribute() method sets the supplied attribute to the specified value.

The method takes the following 2 parameters:

name - the name of the attribute to be set.
value - the value to assign to the attribute.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Remove the focus from an Element using JavaScript

# Table of Contents