Set focus on first field with jQuery

f you are using Prototype see this post.

Setting focus on the first text field with jQuery is as simple as

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

Find more at http://docs.jquery.com/Selectors

Update: If you are on Rails you can use auto_focusable_forms, dependency free plugin that will focus first input for you.

14 thoughts on “Set focus on first field with jQuery

  1. 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 ;)

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

  3. “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).

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>