<p>How do you automatically set the focus to a textbox when a web page loads?</p>

<p>Is there an HTML tag to do it or does it have to be done via Javascript?</p>

[{'answer_id': 45833, 'author': 'Espo', 'author_id': 2257, 'author_profile': 'https://Stackoverflow.com/users/2257', 'pm_score': 4, 'selected': False, 'text': '<p>You need to use javascript:</p>\n\n<pre><code>&lt;BODY onLoad="document.getElementById(\'myButton\').focus();"&gt;\n</code></pre>\n\n<hr>\n\n<p>@Ben notes that you should not add event handlers like this. While that is another question, he recommends that you use this function:</p>\n\n<pre><code>function addLoadEvent(func) {\n  var oldonload = window.onload;\n  if (typeof window.onload != \'function\') {\n    window.onload = func;\n  } else {\n    window.onload = function() {\n      if (oldonload) {\n        oldonload();\n      }\n      func();\n    }\n  }\n}\n</code></pre>\n\n<p>And then put a call to addLoadEvent on your page and reference a function the sets the focus to you desired textbox.</p>\n'}, {'answer_id': 45843, 'author': 'Joel Coehoorn', 'author_id': 3043, 'author_profile': 'https://Stackoverflow.com/users/3043', 'pm_score': 3, 'selected': False, 'text': '<pre><code>&lt;html&gt;  \n&lt;head&gt;  \n&lt;script language="javascript" type="text/javascript"&gt;  \nfunction SetFocus(InputID)  \n{  \n   document.getElementById(InputID).focus();  \n}  \n&lt;/script&gt;  \n&lt;/head&gt;  \n&lt;body onload="SetFocus(\'Box2\')"&gt;  \n&lt;input id="Box1" size="30" /&gt;&lt;br/&gt;  \n&lt;input id="Box2" size="30" /&gt;  \n&lt;/body&gt;  \n&lt;/html&gt;  \n</code></pre>\n'}, {'answer_id': 45863, 'author': 'Ben Scheirman', 'author_id': 3381, 'author_profile': 'https://Stackoverflow.com/users/3381', 'pm_score': 9, 'selected': True, 'text': '<p>If you\'re using jquery:</p>\n\n<pre><code>$(function() {\n  $("#Box1").focus();\n});\n</code></pre>\n\n<p>or prototype:</p>\n\n<pre><code>Event.observe(window, \'load\', function() {\n  $("Box1").focus();\n});\n</code></pre>\n\n<p>or plain javascript:</p>\n\n<pre><code>window.onload = function() {\n  document.getElementById("Box1").focus();\n};\n</code></pre>\n\n<p>though keep in mind that this will replace other on load handlers, so look up addLoadEvent() in google for a safe way to append onload handlers rather than replacing.</p>\n'}, {'answer_id': 45887, 'author': 'Jon', 'author_id': 4764, 'author_profile': 'https://Stackoverflow.com/users/4764', 'pm_score': 4, 'selected': False, 'text': '<p>Using plain vanilla html and javascript</p>\n\n<pre><code>&lt;input type=\'text\' id=\'txtMyInputBox\' /&gt;\n\n\n&lt;script language=\'javascript\' type=\'text/javascript\'&gt;\nfunction SetFocus()\n{\n    // safety check, make sure its a post 1999 browser\n    if (!document.getElementById)\n    {\n        return;\n    }\n\n    var txtMyInputBoxElement = document.getElementById("txtMyInputBox");\n\n    if (txtMyInputBoxElement != null)\n    {\n        txtMyInputBoxElement.focus();\n    }\n}\nSetFocus();\n&lt;/script&gt;\n</code></pre>\n\n<p>For those out there using the .net framework and asp.net 2.0 or above, its trivial.  If you are using older versions of the framework, you\'d need to write some javascript similar to above.</p>\n\n<p>In your OnLoad handler (generally page_load if you are using the stock page template supplied with visual studio) you can use:</p>\n\n<p>C#</p>\n\n<pre><code>protected void PageLoad(object sender, EventArgs e)\n{\n    Page.SetFocus(txtMyInputBox);\n}\n</code></pre>\n\n<p>VB.NET</p>\n\n<pre><code>Protected Sub PageLoad(sender as Object, e as EventArgs)\n\n    Page.SetFocus(txtMyInputBox)\n\nEnd Sub\n</code></pre>\n\n<p>(* Note I removed the underscore character from the function name that is generally Page_Load since in a code block it refused to render properly!  I could not see in the markup documentation how to get underscores to render unescaped.)</p>\n\n<p>Hope this helps.</p>\n'}, {'answer_id': 47470, 'author': 'Vincent Robert', 'author_id': 268, 'author_profile': 'https://Stackoverflow.com/users/268', 'pm_score': 3, 'selected': False, 'text': '<p>As a general advice, I would recommend not stealing the focus from the address bar. (<a href="http://www.codinghorror.com/blog/archives/001011.html" rel="noreferrer">Jeff already talked about that.</a>)</p>\n\n<p>Web page can take some time to load, which means that your focus change can occur some long time after the user typed the pae URL. Then he could have changed his mind and be back to url typing while you will be loading your page and stealing the focus to put it in your textbox.</p>\n\n<p>That\'s the one and only reason that made me remove Google as my start page.</p>\n\n<p>Of course, if you control the network (local network) or if the focus change is to solve an important usability issue, forget all I just said :)</p>\n'}, {'answer_id': 3043784, 'author': 'dave1010', 'author_id': 315435, 'author_profile': 'https://Stackoverflow.com/users/315435', 'pm_score': 7, 'selected': False, 'text': '<p>In HTML there\'s an <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#autofocusing-a-form-control" rel="noreferrer"><code>autofocus</code> attribute</a> to all form fields. There\'s a good tutorial on it in <a href="http://diveintohtml5.info/forms.html#autofocus" rel="noreferrer">Dive Into HTML 5</a>. Unfortunately it\'s currently not <a href="http://www.wufoo.com/html5/attributes/02-autofocus.html" rel="noreferrer">supported</a> by IE versions less than 10.</p>\n\n<p>To use the HTML 5 attribute and fall back to a JS option:</p>\n\n<pre><code>&lt;input id="my-input" autofocus="autofocus" /&gt;\n&lt;script&gt;\n  if (!("autofocus" in document.createElement("input"))) {\n    document.getElementById("my-input").focus();\n  }\n&lt;/script&gt;\n</code></pre>\n\n<p>No jQuery, onload or event handlers are required, because the JS is below the HTML element.</p>\n\n<p>Edit: another advantage is that it works with JavaScript off in some browsers and you can remove the JavaScript when you don\'t want to support older browsers.</p>\n\n<p>Edit 2: Firefox 4 now supports the <code>autofocus</code> attribute, just leaving IE without support.</p>\n'}, {'answer_id': 3316361, 'author': 'revive', 'author_id': 225230, 'author_profile': 'https://Stackoverflow.com/users/225230', 'pm_score': 3, 'selected': False, 'text': '<p>IMHO, the \'cleanest\' way to select the First, visible, enabled text field on the page, is to use jQuery and do something like this:</p>\n\n<pre><code>$(document).ready(function() {\n  $(\'input:text[value=""]:visible:enabled:first\').focus();\n});\n</code></pre>\n\n<p>Hope that helps...</p>\n\n<p>Thanks...</p>\n'}, {'answer_id': 7265423, 'author': 'Amir Chatrbahr', 'author_id': 922713, 'author_profile': 'https://Stackoverflow.com/users/922713', 'pm_score': 4, 'selected': False, 'text': '<p>You can do it easily by using jquery in this way:</p>\n\n<pre><code>&lt;script type="text/javascript"&gt;\n\n    $(document).ready(function () {\n        $("#myTextBoxId").focus();\n    });\n\n&lt;/script&gt;\n</code></pre>\n\n<p>by calling this function in <code>$(document).ready()</code>. </p>\n\n<p>It means this function will execute when the DOM is ready.</p>\n\n<p>For more information about the READY function, refer to : <a href="http://api.jquery.com/ready/" rel="noreferrer">http://api.jquery.com/ready/</a></p>\n'}, {'answer_id': 12821915, 'author': 'srikanth', 'author_id': 1735238, 'author_profile': 'https://Stackoverflow.com/users/1735238', 'pm_score': -1, 'selected': False, 'text': '<p>Use the below code. For me it is working</p>\n\n<pre><code>jQuery("[id$=\'hfSpecialty_ids\']").focus()\n</code></pre>\n'}, {'answer_id': 40920357, 'author': 'Chris Moschini', 'author_id': 176877, 'author_profile': 'https://Stackoverflow.com/users/176877', 'pm_score': 2, 'selected': False, 'text': '<p>I had a slightly different problem. I wanted <code>autofocus</code>, but, wanted the <code>placeholder</code> text to remain, cross-browser. Some browsers would hide the <code>placeholder</code> text as soon as the field focused, some would keep it. I had to either get placeholders staying cross-browser, which has weird side effects, or stop using <code>autofocus</code>.</p>\n\n<p>So I listened for the first key typed against the body tag, and redirected that key into the target input field. Then all the event handlers involved get killed off to keep things clean.</p>\n\n<pre><code>var urlInput = $(\'#Url\');\n\nfunction bodyFirstKey(ev) {\n    $(\'body\').off(\'keydown\', bodyFirstKey);\n    urlInput.off(\'focus\', urlInputFirstFocus);\n\n    if (ev.target == document.body) {\n        urlInput.focus();\n        if (!ev.ctrlKey &amp;&amp; !ev.metaKey &amp;&amp; !ev.altKey) {\n            urlInput.val(ev.key);\n            return false;\n        }\n    }\n};\nfunction urlInputFirstFocus() {\n    $(\'body\').off(\'keydown\', bodyFirstKey);\n    urlInput.off(\'focus\', urlInputFirstFocus);\n};\n\n$(\'body\').keydown(bodyFirstKey);\nurlInput.focus(urlInputFirstFocus);\n</code></pre>\n\n<p><a href="https://jsfiddle.net/b9chris/qLrrb93w/" rel="nofollow noreferrer">https://jsfiddle.net/b9chris/qLrrb93w/</a></p>\n'}, {'answer_id': 40920516, 'author': 'Andrew Morton', 'author_id': 1115360, 'author_profile': 'https://Stackoverflow.com/users/1115360', 'pm_score': -1, 'selected': False, 'text': '<p>If you are using ASP.NET then you can use</p>\n\n<pre><code>yourControlName.Focus()\n</code></pre>\n\n<p>in the code on the server, which will add appropriate JavaScript into the page.</p>\n\n<p>Other server-side frameworks may have an equivalent method.</p>\n'}, {'answer_id': 41675311, 'author': 'Arjun', 'author_id': 7409227, 'author_profile': 'https://Stackoverflow.com/users/7409227', 'pm_score': 4, 'selected': False, 'text': '<p>Simply write autofocus in the textfield. This is simple and it works like this:</p>\n\n<pre><code> &lt;input name="abc" autofocus&gt;&lt;/input&gt;\n</code></pre>\n\n<p>Hope this helps.</p>\n'}, {'answer_id': 58286168, 'author': 'oscar castellon', 'author_id': 1283517, 'author_profile': 'https://Stackoverflow.com/users/1283517', 'pm_score': 2, 'selected': False, 'text': '<p>It is possible to set <code>autofocus</code> on input elements</p>\n\n<pre><code>&lt;input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus"&gt;\n</code></pre>\n'}, {'answer_id': 70608454, 'author': 'tdahman1325', 'author_id': 11580142, 'author_profile': 'https://Stackoverflow.com/users/11580142', 'pm_score': 0, 'selected': False, 'text': "<p>Adjusted my answer from Dave1010 above as JavaScript backup didn't work for me.</p>\n<pre><code>&lt;input type=&quot;text&quot; id=&quot;my-input&quot; /&gt;\n</code></pre>\n<p>And the Javascipt backup check:</p>\n<pre><code>if (!(document.getElementById(&quot;my-input&quot;).hasAttribute(&quot;autofocus&quot;))) {\n    document.getElementById(&quot;my-input&quot;).focus();\n}\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/45827', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/305/']