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?

DOK · Accepted Answer · 2009-10-20 00:52:41Z

452

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, 2009 at 0:52

DOK

32.8k8 gold badges64 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matt Canty Over a year ago

If using a dialog please see this answer if the above is not working stackoverflow.com/a/20629541/966609

Rav Over a year ago

$('input[type="text"]').get(0).focus(); ...worked for me

ricks Over a year ago

.focus() was depricated in 3.3, for newer versions use .trigger('focus');

mikemaccana · Accepted Answer · 2017-08-01 12:22:47Z

114

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 1, 2017 at 12:22

mikemaccana

126k113 gold badges441 silver badges544 bronze badges

answered Oct 12, 2014 at 23:58

Andrew Liu

2,5585 gold badges24 silver badges29 bronze badges

3 Comments

BA TabNabber Over a year ago

autofocus does not work in IE11 either stackoverflow.com/questions/34068302/…

Vishnu Y S Over a year ago

This works for my scenario but the selected answer did not for some reason.

Andreas Over a year ago

This is great and also shorter, even if a single letter id was used! :P

codes_occasionally · Accepted Answer · 2009-10-20 00:51:10Z

34

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, 2009 at 0:51

codes_occasionally

9,5869 gold badges46 silver badges61 bronze badges

3 Comments

Ali Sheikhpour Over a year ago

I recommend to bring the script after html element.

Popnoodles Over a year ago

@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.

mehdi eybak abadi Over a year ago

Thank you, I tried very hard and your answer only solved my problem. A plus point.Thanks

Nijboer IT · Accepted Answer · 2013-09-09 09:09:48Z

23

Why is everybody using jQuery for something simple as this.

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

answered Sep 9, 2013 at 9:09

Nijboer IT

1,2161 gold badge14 silver badges18 bronze badges

1 Comment

Adarsh Madrecha Over a year ago

Because the question is tagged as jQuery.

Tim Down · Accepted Answer · 2009-10-20 08:51:18Z

21

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

answered Oct 20, 2009 at 8:51

Tim Down

326k76 gold badges461 silver badges546 bronze badges

1 Comment

Folusho Over a year ago

Your perspective is not only technically correct, but your consideration for the best UX possible is exquisite. Bravo!

brendan · Accepted Answer · 2009-10-20 00:51:18Z

14

HTML:

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

jQuery:

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

answered Oct 20, 2009 at 0:51

brendan

30.1k20 gold badges70 silver badges109 bronze badges

2 Comments

Adarsh Madrecha Over a year ago

if using html5, just add autofocus attribute to the input element?

Khom Nazid Over a year ago

How is that attribute used, and will it become the focused element as soon as its parent form appears?

Andrew Calder · Accepted Answer · 2021-01-18 03:16:45Z

11

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.

edited Jan 18, 2021 at 3:16

answered Apr 7, 2013 at 21:45

Andrew Calder

4514 silver badges8 bronze badges

Comments

poveilleux · Accepted Answer · 2014-01-15 16:52:49Z

7

This is what I prefer to use:

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

answered Jan 15, 2014 at 16:52

poveilleux

1431 silver badge5 bronze badges

1 Comment

OverCoder Over a year ago

It's bad way to do things, to focus on an <input> on document load, just use the autofocus attribute provided by HTML5

Bill Marquis · Accepted Answer · 2013-08-16 01:34:59Z

3

place after input

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

answered Aug 16, 2013 at 1:34

Bill Marquis

311 bronze badge

Comments

Not A Robot · Accepted Answer · 2021-03-31 15:06:54Z

3

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

You can also use HTML5 element <autofocus>

edited Mar 31, 2021 at 15:06

Not A Robot

2,7002 gold badges20 silver badges37 bronze badges

answered Mar 31, 2021 at 8:45

Damiano93

296 bronze badges

Comments

David Sopko · Accepted Answer · 2019-04-06 22:23:56Z

2

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

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

answered Apr 6, 2019 at 22:23

David Sopko

5,7332 gold badges40 silver badges43 bronze badges

Comments

Muhammad Owais · Accepted Answer · 2018-02-13 06:31:09Z

0

The Simple and easiest way to achieve this

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

answered Feb 13, 2018 at 6:31

Muhammad Owais

1,1964 gold badges19 silver badges41 bronze badges

Comments

gdm · Accepted Answer · 2024-09-13 15:39:53Z

0

.focus() is dreprecated. Use .trigger("focus")

answered Sep 13, 2024 at 15:39

gdm

8,0464 gold badges46 silver badges74 bronze badges

Collectives™ on Stack Overflow

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

13 Answers 13

3 Comments

3 Comments

3 Comments

1 Comment

1 Comment

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

3 Comments

3 Comments

3 Comments

1 Comment

1 Comment

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related