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

15 thoughts on “Set focus on first field with jQuery”

1. Nice code, jquery is cool. Thanks for the example.

   Reply ↓

2. If you want to have more control about this there’s another alternative with this plugin:

   http://github.com/dcadenas/auto_focusable_forms/tree/master

   -After you install it you will have automatically focused your first inputs without adding a single line of code to your app.

   -Another nice thing is that you can disable this behaviour by just passing “:autofocus => false” to your forms_for.

   -Another advantage is that there’s no dependency with Prototype or JQuery.

   Oh sorry, there are some dependencies, you’ll need Rails and a browser that can understand javascript

   Reply ↓

3. one extra bit add a visible
   $(“input:text:first:visible”).focus();

   Reply ↓

4. how about $(”input:text:visible:first”).focus();?
   I am not sure how filter work, but if they are taken from left to right, then visible should be filtered out first.

   Reply ↓

5. “how about $(”input:text:visible:first”).focus();?”

   Actually, that should be: $(“:input:text:visible:first”).focus();

   This will grab focus to the first form field, regardles sof type (select, input, textarea).

   Reply ↓

6. Correction, I meant to remove the :text part of my query. Should be:

   $(“:input:visible:first”).focus();

   Reply ↓

7. Pingback: Set focus on first field with Prototype « Kolodvor

8. How would you do this to a named input field? Or should I assign it a class or id value?

   I would rather do it by its name.

   Thanks.
   Bill

   Reply ↓

9. @Bill

   I think what you need is:
   $(“input[name='myname']“).focus()

   Reply ↓

10. nice tip

    Reply ↓

11. Dead simple; works perfectly. Thanks!

    Reply ↓

12. This is the correct code that works.

    #input refers to the name of the id attribute for the input field.

    //set focus to first input box
    $(‘#input’).focus();
    $(“#input:text:visible:first”).focus();

    A live demo can be seen here: http://blogoola.com/signup/

    Reply ↓

13. Hi, I am trying to set the focus in dropdown using Jquery. Can any one help me out.

    Reply ↓

    • Almost 8 months late but…

      $(“select:first”).focus();

      Reply ↓

14. focus not working IN IE . Can you give me to do it…

    Reply ↓