focus() not working in JavaScript issue [Solved]

# Table of Contents

# focus() not working in JavaScript issue [Solved]

The issue where the focus() method doesn't work occurs for multiple reasons:

trying to call the focus() method before the DOM is fully loaded.
calling the focus() method when the Console tab of your developer tools is selected.
trying to focus an element that cannot be focused by default.
trying to focus an invisible element.

For example, in some cases, the following might not work.

Here is the HTML for the example.

index.html

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

  <body>
    <input
      id="message"
      name="message"
      placeholder="Your message"
    />

    <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 messageInput = document.getElementById('message');

messageInput.focus();

The code for this article is available on GitHub

If the DOM is not fully loaded and rendered by the time the focus() method is invoked, the element might not get focused.

One way to resolve the issue is to add a timeout that runs when the thread becomes idle.

index.js

Copied!
const messageInput = document.getElementById('message');

setTimeout(() => {
  messageInput.focus();
}, 0);

focus input using timeout

The code for this article is available on GitHub

The setTimeout() method calls the given function after the specified timeout (in milliseconds).

We used a timeout of 0 milliseconds, so the function will get queued and called when the browser is ready.

If that didn't work, try to increase the timeout to 3000 ms and see if that works.

index.js

Copied!
const messageInput = document.getElementById('message');

setTimeout(() => {
  messageInput.focus();
}, 0);

# Make sure the Console tab of your Dev tools isn't selected

Another common reason for not being able to focus an element is when the Console tab (or any other Devtools tab) of your developer tools is selected.

Suppose we have the following HTML.

index.html

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

  <body>
    <input
      id="message"
      name="message"
      placeholder="Your message"
    />

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

The code for this article is available on GitHub

And the following JavaScript.

index.js

Copied!
const messageInput = document.getElementById('message');

messageInput.focus();

The code for this article is available on GitHub

If I load the page from the example with npx serve ., I should be able to immediately focus the element.

However, notice that the focus() method does not work when the Console tab (or any other tab) in your Developer tools is selected.

focus does not work when console tab is selected

Try to close the Console tab or select the page by left-clicking on the window.

If your developer tools are selected, the focus() method won't work.

# Some elements cannot be focused by default

If you're trying to focus an element that cannot be focused by default, you have to set its tabIndex property to -1 before calling the focus() method.

Here is the HTML for the example.

index.html

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

  <body>
    <div id="box">bobbyhadz.com</div>

    <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 box = document.getElementById('box');

box.tabIndex = '-1';

box.focus();

trying to focus elements that cannot be focused

The code for this article is available on GitHub

Some elements, e.g. div and p cannot be focused by default, so you have to use the set their tabIndex property to -1 before calling the focus() method.

I've written a detailed guide on how to change the active element using JavaScript in case you want to read more on the topic.

We could've also set the tabindex attribute directly on the HTML element.

index.html

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

  <body>
    <div id="box" tabindex="-1">bobbyhadz.com</div>

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

The code for this article is available on GitHub

Then, we can call the focus() method directly in our JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

box.focus();

You can also use a tabindex value of 0 which means that the element should be focusable in sequential keyboard navigation.

index.html

Copied!
<div id="box" tabindex="0">bobbyhadz.com</div>

# Make sure the element on which you're calling focus() is not invisible

Make sure that the element on which you're calling the focus() method is not invisible or has its display property set to none at the time the focus() method is called.

Here is the HTML for the example.

index.html

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

    <style>
      #message {
        display: none;
      }
    </style>
  </head>

  <body>
    <input
      id="message"
      name="message"
      placeholder="Your message"
    />
    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Notice that the display CSS property of the input element is set to none.

index.css

Copied!
#message {
  display: none;
}

Therefore the element is hidden.

Here is the related JavaScript code.

index.js

Copied!
const messageField = document.getElementById('message');

messageField.style.display = 'block';
messageField.style.visibility = 'visible';

messageField.focus();

The code for this article is available on GitHub

We set the display CSS property of the element to block.

You can also use the inline-block or inline values.

As long as the property isn't set to none, everything should work as expected.

We also set the visibility CSS property to visible.

Calling the focus() method on the input element works even though it was initially hidden.

focus field that was initially hidden

# Conclusion

To resolve the issue where the focus() method doesn't work, make sure:

to call the focus() method after the DOM is fully loaded.
you haven't selected the Console developer tools tab when calling the focus() method.
you aren't trying to focus an element that cannot be focused by default.
you aren't trying to focus an invisible element.

# 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.

focus() not working in JavaScript issue [Solved]

# Table of Contents