How to focus on a form input text field on page load using jQuery?

How to focus on a form input text field on page load using jQuery?

This is probably very simple, but could somebody tell me how to get the cursor blinking on a text box on page load?


Solution 1:

Set focus on the first text field:


This also does the first text field, but you can change the [0] to another index:


Or, you can use the ID:


Solution 2:

You can use HTML5 autofocus for this. You don’t need jQuery or other JavaScript.

<input type="text" name="some_field" autofocus>

Note this will not work on IE9 and lower.

Solution 3:


    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
    <input type="text" id="myTextBox">

Solution 4:

Why is everybody using jQuery for something simple as this.

<body OnLoad="document.myform.mytextfield.focus();">

Solution 5:

Think about your user interface before you do this. I assume (though none of the answers has said so) that you’ll be doing this when the document loads using jQuery’s ready() function. If a user has already focussed on a different element before the document has loaded (which is perfectly possible) then it’s extremely irritating for them to have the focus stolen away.

Related:  Generate date from week number in moment.js

You could check for this by adding onfocus attributes in each of your <input> elements to record whether the user has already focussed on a form field and then not stealing the focus if they have:

var anyFieldReceivedFocus = false;

function fieldReceivedFocus() {
    anyFieldReceivedFocus = true;

function focusFirstField() {
    if (!anyFieldReceivedFocus) {
        // Do jQuery focus stuff

<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">

Solution 6:


  <input id="search" size="10" />