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?

Solutions/Answers:

Solution 1:

Set focus on the first text field:

 $("input:text:visible:first").focus();

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

$('input[@type="text"]')[0].focus(); 

Or, you can use the ID:

$("#someTextBox").focus();

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:

Sure:

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

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:

HTML:

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

jQuery:

$("#search").focus();