{"id":30753,"date":"2012-11-22T21:01:45","date_gmt":"2012-11-22T15:31:45","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=30753"},"modified":"2026-10-11T10:39:11","modified_gmt":"2026-10-11T05:09:11","slug":"move-cursor-to-focus-form-input-text-field","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2012\/11\/move-cursor-to-focus-form-input-text-field\/","title":{"rendered":"How to Autofocus an Input Field or Search Box (HTML and JavaScript, 2026)"},"content":{"rendered":"<p>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&#8217;s the modern way, plus a better option for content pages and the accessibility rules to keep in mind.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-59104\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/search-field-cursor-1024x261.png\" alt=\"Autofocus input field in a search box\" width=\"760\" height=\"194\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/search-field-cursor-1024x261.png 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/search-field-cursor-300x76.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/search-field-cursor-150x38.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/search-field-cursor-768x195.png 768w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/search-field-cursor.png 1375w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> To autofocus an input field, add the <code>autofocus<\/code> attribute to it: <code>&lt;input type=\"search\" name=\"q\" autofocus&gt;<\/code>. 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 <kbd>\/<\/kbd> to focus search is friendlier.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ada74968c8c2\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ada74968c8c2\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/11\/move-cursor-to-focus-form-input-text-field\/#Why_autofocus_an_input_field\" >Why autofocus an input field?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/11\/move-cursor-to-focus-form-input-text-field\/#Method_1_The_HTML_autofocus_attribute\" >Method 1: The HTML autofocus attribute<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/11\/move-cursor-to-focus-form-input-text-field\/#Method_2_Focus_with_JavaScript\" >Method 2: Focus with JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/11\/move-cursor-to-focus-form-input-text-field\/#Method_3_Press_to_search_best_for_blogs\" >Method 3: Press \/ to search (best for blogs)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/11\/move-cursor-to-focus-form-input-text-field\/#Autofocus_input_field_accessibility_and_UX_tips\" >Autofocus input field: accessibility and UX tips<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/11\/move-cursor-to-focus-form-input-text-field\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/11\/move-cursor-to-focus-form-input-text-field\/#Does_the_autofocus_attribute_work_in_all_browsers\" >Does the autofocus attribute work in all browsers?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/11\/move-cursor-to-focus-form-input-text-field\/#Why_isnt_autofocus_working_on_my_page\" >Why isn&#8217;t autofocus working on my page?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/11\/move-cursor-to-focus-form-input-text-field\/#Is_autofocus_bad_for_SEO\" >Is autofocus bad for SEO?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/11\/move-cursor-to-focus-form-input-text-field\/#How_do_I_autofocus_a_field_in_WordPress\" >How do I autofocus a field in WordPress?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_autofocus_an_input_field\"><\/span>Why autofocus an input field?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When the cursor is already in the right field, visitors skip a click and start typing straight away. Google, Gmail&#8217;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.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_1_The_HTML_autofocus_attribute\"><\/span>Method 1: The HTML autofocus attribute<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Add <code>autofocus<\/code> to one field per page:<\/p>\n<pre><code>&lt;form action=\"\/\" role=\"search\"&gt;\r\n  &lt;input type=\"search\" name=\"s\" placeholder=\"Search\" aria-label=\"Search\" autofocus&gt;\r\n  &lt;button type=\"submit\"&gt;Search&lt;\/button&gt;\r\n&lt;\/form&gt;<\/code><\/pre>\n<p>It works in all modern browsers, needs no JavaScript and also works inside dialogs: when a <code>&lt;dialog&gt;<\/code> opens, the field with <code>autofocus<\/code> receives focus.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_2_Focus_with_JavaScript\"><\/span>Method 2: Focus with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Use JavaScript when you need conditions, for example focusing only on desktop screens or after a menu opens:<\/p>\n<pre><code>&lt;script&gt;\r\n  const box = document.getElementById('site-search');\r\n  if (box &amp;&amp; window.matchMedia('(min-width: 1024px)').matches) {\r\n    box.focus({ preventScroll: true });\r\n  }\r\n&lt;\/script&gt;<\/code><\/pre>\n<p><code>preventScroll: true<\/code> stops the page jumping if the field is lower down. Our 2012 code used the old <code>FormID.FieldID.focus()<\/code> shortcut, which relies on browsers exposing IDs as global variables; <code>getElementById<\/code> is more reliable.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_3_Press_to_search_best_for_blogs\"><\/span>Method 3: Press \/ to search (best for blogs)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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:<\/p>\n<pre><code>&lt;script&gt;\r\ndocument.addEventListener('keydown', function (e) {\r\n  const t = e.target.tagName;\r\n  if (e.key === '\/' &amp;&amp; t !== 'INPUT' &amp;&amp; t !== 'TEXTAREA') {\r\n    e.preventDefault();\r\n    document.getElementById('site-search').focus();\r\n  }\r\n});\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>YouTube and GitHub use the same <kbd>\/<\/kbd> shortcut, so many visitors already know it.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Autofocus_input_field_accessibility_and_UX_tips\"><\/span>Autofocus input field: accessibility and UX tips<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>One field only:<\/strong> use <code>autofocus<\/code> on a single element per page.<\/li>\n<li><strong>Avoid it on long pages:<\/strong> screen reader users may land in the middle of the page and miss the content above.<\/li>\n<li><strong>Think about mobile:<\/strong> focusing a field can open the on-screen keyboard and hide half the page.<\/li>\n<li><strong>Label the field:<\/strong> use a visible label or <code>aria-label<\/code> so assistive technology announces it.<\/li>\n<\/ul>\n<p>Want more searches on your site? See how <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/03\/google-search-pages-traffic\/\">search features affect your traffic<\/a> and our tips for <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/09\/google-custom-search-results-links-same-window\/\">Google Custom Search on your site<\/a>. You can use the same trick on newsletter forms to help <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/08\/first-amazon-ses-email-campaign-results\/\">grow email subscriptions<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Does_the_autofocus_attribute_work_in_all_browsers\"><\/span>Does the autofocus attribute work in all browsers?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. Chrome, Edge, Firefox and Safari all support it, on desktop and mobile.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Why_isnt_autofocus_working_on_my_page\"><\/span>Why isn&#8217;t autofocus working on my page?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Only the first <code>autofocus<\/code> 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&#8217;s visible when the page loads.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Is_autofocus_bad_for_SEO\"><\/span>Is autofocus bad for SEO?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. It doesn&#8217;t affect rankings, but a page that jumps or opens the keyboard can annoy visitors.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_do_I_autofocus_a_field_in_WordPress\"><\/span>How do I autofocus a field in WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Add <code>autofocus<\/code> to your theme&#8217;s search form template (<code>searchform.php<\/code>) or use the JavaScript shortcut method in a code snippets plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want the cursor to start blinking in your search box as soon as a page loads, like on the Google&#8230;<\/p>\n","protected":false},"author":4,"featured_media":59104,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49],"class_list":["post-30753","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/30753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=30753"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/30753\/revisions"}],"predecessor-version":[{"id":63766,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/30753\/revisions\/63766"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/59104"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=30753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=30753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=30753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}