Automatic input focus

August 2, 2008

Just a tiny little thing, but o so helpful that I wish everybody would implement: whenever a page is shown with a form on it the main input field should always automatically get the focus. Not many sites or web applications take care of this unfortunately. In my latest app using jQuery this is solved by a one liner:

$("input[class*=title]:first").livequery(function(){this.focus();});

Throughout the app, whenever a form is shown, either directly by the page load or via an Ajax call, the first input field with class title gets the focus. It uses the excellent jQuery Live Query plugin.


Comments

  1. This can be done in SproutCore too! Here's the code to put in main.js, after SC.page.awake():

    SC.page.myForm.myField.becomeFirstResponder();

    Best, Erich

    — Erich Ocean on August 11, 2008 at 8:29 pm

  2. You are explicitly naming the form and field that you want to become the first responder. This means you have to do that for every form you open.

    The beauty of the solution above is that it always works regardless of which form and fields are shown. I only have to call the one-liner once, and it works everywhere.

    Lawrence Pit on September 4, 2008 at 4:46 pm

Leave a comment