A place for opinions and notes of a valibuk.

Focus On Form Element

Tagged with: — ondrej at 3:34 pm on Sunday, August 19, 2007

Ruby on Rails Ruby on Rails supports forms very comfortably: generating a form from a model, updating data of a model or validating input values. But I always missed one functionality: to set a focus on an element.

It is quite frustrating: a form shows in your browser, you start typing and you are overwriting the actual URL or you are typing to a quick find box. Well, it is my fault, because I did not check if the text cursor | is blinking in one of the form input boxes, so then I click to a wanted input box and, finally, I am typing to the right box :)

But there is a way how to save a movement with a mouse and one mouse click: to set the focus on one of the form elements. (Btw. you can also use the Tab key, but I need to press it 4-times to get to the first input box on a form in my Firefox. Surprisingly, I do not use this way so often. :)

I. Without Focus

Let’s take a form generated by the scaffold generator (for a model called user that contains items first_name and last_name).

  1. <p><label for="user_first_name">First name</label><br/>
  2. <%= text_field ‘user’, ‘first_name’  %></p>
  3. <p><label for="user_login_name">Last name</label><br/>
  4. <%= text_field ‘user’, ‘login_name’  %></p>

The code is displayed in a browser without a text cursor, i.e. none of the input text boxes is focused. For example see the following screenshot:
A form without a focus.

II. Helper Template Method

The focus can be set with a JavaScript code element.focus(), but we will do it in more RoR way :)

Open the ApplicationHelper module, located in the app/helpers/application_helper.rb file, and add there a method set_focus:

  1. span style=”color:#996600;”>"$(‘#{id}’).focus()"

The set_focus method takes an element (specified by its id) and generates a JavaScript code to set the focus. (Tested and it works OK on Firefox and Konqueror; IE sets the focus during loading the page, but when the page is fully loaded, the focus disappears.)

III. With Focus

The focus will be set with the above mentioned method set_focus:

  1. <%= set_focus ‘first_name’ %>

The method should be called after the specified element, e.g. a good place is after the whole form definition.
The form is displayed in a browser with a text cursor, i.e. the First name input text box is focused. For example see the following screenshot:
A form with a focus.

Enjoy :)

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • DZone
  • Digg
  • Reddit
  • Technorati
  • Furl
  • NewsVine
  • Slashdot
  • Ma.gnolia
  • StumbleUpon


Comment by Jon Seidel

September 23, 2007 @ 7:53 pm

Actually, I had to code the set_focus method like this:


Notice the backslashes before the double-quotes (not single-quotes) around the #{id}.

Otherwise, the formatting of the quotes fails in the generated code and it doesn’t work.

Comment by Jeffrey Haas

October 18, 2007 @ 1:39 am

Thanks, this method worked for me, but not until I included the ‘prototype’ library in the <head> section of the layout for my application.

I needed to add:

Comment by Jeffrey Haas

October 18, 2007 @ 1:41 am

Oops, the code got removed when I posted. Here it is again:

<%= javascript_include_tag ‘prototype’ %>

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Comment Preview

commercial break :)

Make an account on -- a really good hosting where you have your own virtual machine. I installed Gentoo there = I like it very much ;)