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

262
votes

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

12
javascriptjqueryhtmlfocus
We don't mind simple questions here. – DOK
Check reply from sohail arif on below link: stackoverflow.com/questions/18054459/… – Sohail Arif

12 Answers

412
votes

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();
99
votes

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.

27
votes

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>
21
votes

Why is everybody using jQuery for something simple as this. 

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

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.

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">
12
votes

HTML:

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

jQuery:

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

Sorry for bumping an old question. I found this via google.

Its also worth noting that its possible to use more than one selector, thus you can target any form element, and not just one specific type.

eg.

$('#myform input,#myform textarea').first().focus();

This will focus the first input or textarea it finds, and of course you can add other selectors into the mix as well. Handy if you can't be certain of a specific element type being first, or if you want something a bit general/reusable.

6
votes

This is what I prefer to use:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>
3
votes

place after input

<script type="text/javascript">document.formname.inputname.focus();</script>
1
votes

The line $('#myTextBox').focus() alone won't put the cursor in the text box, instead use:

$('#myTextBox:text:visible:first').focus();
0
votes

The Simple and easiest way to achieve this

$('#button').on('click', function () {
    $('.form-group input[type="text"]').attr('autofocus', 'true');
});
0
votes

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

You can also use HTML5 element <autofocus>