How to Autofocus an Input Field or Search Box (HTML and JavaScript, 2026)

Want the cursor to start blinking in your search box as soon as a page loads, like on the Google homepage? To autofocus an input field, you once needed a line of JavaScript; in 2026 a single HTML attribute does it. We added this to our site search in 2012 to increase site search views. Here’s the modern way, plus a better option for content pages and the accessibility rules to keep in mind.

Quick answer: To autofocus an input field, add the autofocus attribute to it: <input type="search" name="q" autofocus>. The cursor appears in that field when the page loads, so visitors can start typing immediately. Use it only on pages where filling that field is the main task, such as a search page or login form; on blog posts, a keyboard shortcut like / to focus search is friendlier.

Why autofocus an input field?

When the cursor is already in the right field, visitors skip a click and start typing straight away. Google, Gmail’s sign-in page and many search tools do this because their pages exist for that one action. For your site, it can increase site search usage on a search page or speed up a login or subscription form.

Method 1: The HTML autofocus attribute

Add autofocus to one field per page:

<form action="/" role="search">
  <input type="search" name="s" placeholder="Search" aria-label="Search" autofocus>
  <button type="submit">Search</button>
</form>

It works in all modern browsers, needs no JavaScript and also works inside dialogs: when a <dialog> opens, the field with autofocus receives focus.

Method 2: Focus with JavaScript

Use JavaScript when you need conditions, for example focusing only on desktop screens or after a menu opens:

<script>
  const box = document.getElementById('site-search');
  if (box && window.matchMedia('(min-width: 1024px)').matches) {
    box.focus({ preventScroll: true });
  }
</script>

preventScroll: true stops the page jumping if the field is lower down. Our 2012 code used the old FormID.FieldID.focus() shortcut, which relies on browsers exposing IDs as global variables; getElementById is more reliable.

Method 3: Press / to search (best for blogs)

On article pages, autofocusing the search box can interrupt readers and pop up the keyboard on phones. A keyboard shortcut gives the same speed without that downside:

<script>
document.addEventListener('keydown', function (e) {
  const t = e.target.tagName;
  if (e.key === '/' && t !== 'INPUT' && t !== 'TEXTAREA') {
    e.preventDefault();
    document.getElementById('site-search').focus();
  }
});
</script>

YouTube and GitHub use the same / shortcut, so many visitors already know it.

Autofocus input field: accessibility and UX tips

• One field only: use autofocus on a single element per page.
• Avoid it on long pages: screen reader users may land in the middle of the page and miss the content above.
• Think about mobile: focusing a field can open the on-screen keyboard and hide half the page.
• Label the field: use a visible label or aria-label so assistive technology announces it.

Want more searches on your site? See how search features affect your traffic and our tips for Google Custom Search on your site. You can use the same trick on newsletter forms to help grow email subscriptions.

Frequently asked questions

Does the autofocus attribute work in all browsers?

Yes. Chrome, Edge, Firefox and Safari all support it, on desktop and mobile.

Why isn’t autofocus working on my page?

Only the first autofocus element is used, and some browsers ignore it if the user has already interacted with the page or the field is hidden. Check that it’s visible when the page loads.

Is autofocus bad for SEO?

No. It doesn’t affect rankings, but a page that jumps or opens the keyboard can annoy visitors.

How do I autofocus a field in WordPress?

Add autofocus to your theme’s search form template (searchform.php) or use the JavaScript shortcut method in a code snippets plugin.