Jun 16

Input focus with jQuery

DOM
Add comments

Form input focus always seems a pain to me, I don’t like all of the generated inline javascript that struts or other frameworks add to accomplish this and it always seems to be one issue or another. So here’s a simple solution that applies focus to the last input element in the document that has a class of focus. Short and sweet, nothing fancy, requires the jQuery library of course.

The javascript, preferrably in an external javascript file

    $("input.focus:last").focus();

The html
This entry was posted on Monday, June 16th, 2008 at 7:58 am and is filed under DOM. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Comments

  • Gafitescu Daniel 8:36 am on June 21, 2008

    You could also use :

    $(”:input”).each(function () {
    this.focus(); });
    This way you don’t need to set the class=”focus” .It uses the selectors api.

  • webguy 9:45 am on June 21, 2008

    I’m not sure this accomplishes the same thing, how do you control which input box gains focus then? The idea behind setting a class of focus is, say you have a search field that’s always present in the header of the page that you want to have focus as long as nothing else has focus, but on certain pages like login, for example, you want the username field to have focus instead, in my example both would have a class of focus, but the last field with the focus class specified in the document would actually end up with the focus.

  • Ignatius 4:12 pm on June 21, 2008

    Im missing something here… only one element of a page can have the focus, so why are you using “each”?

    Its easier something like this:

    $(”#fieldId”).focus(); or $(”input.focus”).focus();

    or maybe $(”:input:first”).focus();

    Bye :)

  • webguy 4:25 pm on June 21, 2008

    You’re right there’s probably a better and more efficient way to do this rather than use each, it might even be a little lazy. The goal is to have the last field with focus specified receive focus. The each method does a couple of things for me: if there’s more than one field specified with focus, the method will loop through those elements and the last one will end up with focus; if there are no items with focus there will be no jQuery objects returned and I won’t end up with a javascript error because I asked for focus on something that didn’t exist. Note your syntax above is not correct as focus in this context is a DOM method, not a jQuery method.

  • Ignatius 4:59 pm on June 21, 2008

    I dont think so, $(…).focus() is another jQuery method, to call the DOM method you need this $(…).get(0).focus().

    jQuery is smart enought to dont execute focus() if there is no matched elements, just like each(). Try it for yourself :)

    “Triggers the focus event of each matched element”: http://docs.jquery.com/Events/focus

    Thanks for reply ;)

  • webguy 5:15 pm on June 21, 2008

    I stand corrected, I misinterpreted the doc, I’ll update the post. Thanks for the feedback.

  • paul irish 4:15 pm on June 23, 2008

    using a class selector without a tagname is far far far slower. always use “input.focus” instead of “.focus” when possible.

  • webguy 8:46 pm on June 23, 2008

    Paul, thanks for the advice, I’ve updated the post again to reflect it. I’ve truly been schooled on this one.

Leave a Comment