jQuery: Focus on First Form Element

All in all, jQuery is pretty cool. I just stated working with it for a personal project and have found it simple and fairly intuitive to use, not to mention the plethora of available plug-ins.

I wanted to focus on the first input element in a form using jQuery. I haven’t tested this extensively, but I came up with the following:

    $(document).ready(function() {
       // focus on the first text input field in the first field on the page
        $("input[type='text']:first", document.forms[0]).focus();
    });

We are simply using a selector to pick the first input element of type “text” in the first form on the page (that’s the “document.forms[0]” stuff) and then focus on it. Of course, this is limited only to text fields, but could be extended to other types as well. I’d be interested in hearing about alternatives.


5 Comments on “jQuery: Focus on First Form Element”

  1. Robmcm says:

    Very handy!

    Thanks

  2. genius says:

    Too whiny. Try this instead.

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

  3. ctran says:

    Even better
    $(“:text:visible:enabled:first”).focus();

  4. PP says:

    Does not work if there is a hidden div somewhere in between which has a enabled textbox.

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

Follow

Get every new post delivered to your Inbox.

Join 25 other followers