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

Question

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

score 442 · Accepted Answer · answered Oct 20 '09 at 00:52

442

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

answered Oct 20 '09 at 00:52

DOK

32,337
7
60
92

2

If using a dialog please see this answer if the above is not working http://stackoverflow.com/a/20629541/966609 – Matt Canty Aug 04 '14 at 15:46
1

`$('input[type="text"]').get(0).focus();` ...worked for me – Rav Aug 28 '16 at 09:53
3

`.focus()` was depricated in 3.3, for newer versions use `.trigger('focus');` – ricks Feb 23 '22 at 15:16

score 110 · Answer 2 · edited Aug 01 '17 at 12:22

110

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.

edited Aug 01 '17 at 12:22

mikemaccana

110,530
99
389
494

answered Oct 12 '14 at 23:58

Andrew Liu

2,478
5
22
29

autofocus does not work in IE11 either https://stackoverflow.com/questions/34068302/autofocus-attribute-on-input-field-not-working-in-ie-11 – BA TabNabber Jan 09 '18 at 23:03
2

This works for my scenario but the selected answer did not for some reason. – Vishnu Y S Aug 31 '18 at 07:41
This is great and also shorter, even if a single letter `id` was used! :P – Andreas Aug 25 '20 at 09:58

score 30 · Answer 3 · answered Oct 20 '09 at 00:51

30

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>

answered Oct 20 '09 at 00:51

Pandincus

9,506
9
43
61

4

I recommend to bring the script after html element. – Ali Sheikhpour Dec 23 '18 at 12:03
1

@AliSheikhpour script is within the dom ready wrapper so it doesn't matter that it's before the html element, but it shouldn't be in head anyway. – Popnoodles Jun 19 '19 at 12:21

score 22 · Answer 4 · answered Sep 09 '13 at 09:09

22

Why is everybody using jQuery for something simple as this.

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

answered Sep 09 '13 at 09:09

Nijboer IT

1,178
1
13
18

29

Because the question is tagged as jQuery. – Adarsh Madrecha Feb 13 '18 at 15:41

score 20 · Answer 5 · answered Oct 20 '09 at 08:51

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

Your perspective is not only technically correct, but your consideration for the best UX possible is exquisite. Bravo! — Folusho Oladipo, Feb 06 '17 at 10:42

score 13 · Answer 6 · answered Oct 20 '09 at 00:51

13

HTML:

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

jQuery:

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

answered Oct 20 '09 at 00:51

brendan

29,308
20
68
109

1

if using html5, just add `autofocus` attribute to the input element? – Adarsh Madrecha Feb 13 '18 at 15:40
How is that attribute used, and will it become the focused element as soon as its parent form appears? – Khom Nazid Jun 08 '19 at 05:40

Andrew Calder · Answer 7 · 2021-01-18T03:16:45.533

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.

score 7 · Answer 8 · answered Jan 15 '14 at 16:52

7

This is what I prefer to use:

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

answered Jan 15 '14 at 16:52

poveilleux

143
1
5

3

It's bad way to do things, to focus on an on document load, just use the `autofocus` attribute provided by HTML5 – OverCoder May 24 '16 at 10:43

score 3 · Answer 9 · answered Aug 16 '13 at 01:34

3

place after input

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

answered Aug 16 '13 at 01:34

Bill Marquis

31
1

score 2 · Answer 10 · answered Apr 06 '19 at 22:23

2

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

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

answered Apr 06 '19 at 22:23

David Sopko

5,263
2
38
42

score 2 · Answer 11 · edited Mar 31 '21 at 15:06

2

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

You can also use HTML5 element <autofocus>

edited Mar 31 '21 at 15:06

Not A Bot

2,474
2
16
33

answered Mar 31 '21 at 08:45

Damiano93

19
6

score 0 · Answer 12 · answered Feb 13 '18 at 06:31

0

The Simple and easiest way to achieve this

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

answered Feb 13 '18 at 06:31

Muhammad Owais

980
3
17
37

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

12 Answers12

Linked

Related