Skip to main content

How to Resolve focus() method Not Working in JavaScript

The element.focus() method is the standard way to programmatically set focus on an HTML element, such as an <input>. However, it can sometimes fail to work for a variety of reasons, often without throwing an explicit error. This can be a frustrating debugging experience.

This guide will walk you through the most common reasons why focus() might not be working and provide clear, actionable solutions for each, from timing issues to the properties of the element itself.

The Core Problem: Why Isn't Focus Working?​

The focus() method will fail silently if the element it's called on is not in a "focusable" state. The four most common reasons for this are:

  1. The JavaScript code is running before the element has been rendered in the DOM.
  2. The element is hidden with CSS (display: none or visibility: hidden).
  3. The element is not of a type that can receive focus by default (like a <div>).
  4. The browser's DevTools are currently focused, stealing focus from the page.

Cause 1: The Element is Not Yet in the DOM​

This is the most common timing issue. If your <script> tag is in the <head> of your HTML without a defer attribute, it will execute before the browser has parsed the <body> and created the DOM elements.

HTML:

<head>
  <script src="index.js"></script>
</head>
<body>
  <input id="my-input">
</body>

JavaScript (index.js):

// This runs too early! The input element doesn't exist yet.
const myInput = document.getElementById('my-input');
myInput.focus(); // Fails because myInput is null

The solution is to ensure your script runs only after the DOM is ready.

  • Move your <script> tag: Place it just before the closing </body> tag.
  • Use the defer attribute: Add defer to your script tag in the head. <script src="index.js" defer></script>
  • Wrap your code in an event listener: 
    window.addEventListener('DOMContentLoaded', () => {
      const myInput = document.getElementById('my-input');
      myInput.focus();
    });

Cause 2: The Element is Not Visible​

You cannot set focus on an element that is not visible. This includes elements with display: none or visibility: hidden.

For example

CSS
#my-input {
  display: none;
}
JavaScript
// This will fail because the element is not rendered on the page.
document.getElementById('my-input').focus();

Solution: you must make the element visible before you call .focus().

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

// 1. Make the element visible first.
myInput.style.display = 'block';

// 2. Now, call focus().
myInput.focus();

Cause 3: The Element is Not Natively Focusable​

Only certain elements can receive focus by default. These are typically interactive elements like <input>, <select>, <textarea>, <button>, and <a>. You cannot call .focus() on a <div>, <span>, or <p> without an extra step.

For example, consider this code with problem:

// ⛔️ This will not work.
document.getElementById('my-div').focus();

To make a non-interactive element focusable, you must give it a tabindex attribute.

  • tabindex="-1": Makes the element focusable via JavaScript (.focus()) but not via keyboard navigation (Tab key). This is usually what you want.
  • tabindex="0": Makes the element focusable via JavaScript and includes it in the natural keyboard navigation order.
const myDiv = document.getElementById('my-div');

// 1. Make the div programmatically focusable.
myDiv.tabIndex = -1;

// 2. Now the focus() call will work.
myDiv.focus();

Cause 4: The DevTools Console is Active​

A simple but often overlooked cause is that the browser's own DevTools are currently focused. If your cursor is active in the Console or any other DevTools panel when the .focus() command runs, the DevTools will retain focus, and the element on the page will not appear focused.

Solution: simply click anywhere on the webpage itself to give it focus, and then trigger the action again. When testing, ensure that the main document window is the active window.

Conclusion​

The element.focus() method is reliable, but it depends on the state of the element and the page. If it's not working, run through this diagnostic checklist:

  1. Is my script running after the DOM has loaded? (Use defer or move the script tag).
  2. Is the element visible? (It cannot have display: none or visibility: hidden).
  3. Is the element natively focusable? (If not, add tabIndex = -1).
  4. Is the browser window itself focused? (Not the DevTools).

By checking these four common issues, you can quickly diagnose and fix any problems with the focus() method.

Table of Contents