Wolfmans Howlings: Setting the focus in a form

Setting the focus in a form

Jim Morris — Sun, 29 Oct 2006 15:40:38 -0800

This is a simple one, how do I set the focus in the first item in my form?

Put this in your app/helpers/application_helper.rb:

  # put this in the body after a form to set the input focus to a specific control id
          def set_focus_to_id(id)
            <<-END
            <script language="javascript">
                <!--
                        document.getElementById("#{id}").focus()
                //-->
            </script>
            END
          end

Then in your .rhtml file somewhere after the form is defined add this

<%= set_focus_to_id 'user_login' %>

where user_login will be the id of the field you want to get the focus.

An example of a login form...

<p>
        Please Login
        </p>
        <% form_for :user do |f| %>
          <label for="user_login">Login</label>
          <%= f.text_field :login, :tabindex => "1" %>
          <br />
          <label for="user_password">Password</label>
          <%= f.password_field :password, :tabindex => "2" %>
          <br />
          <label for="user_remember_me">Remember me:</label>
          <%= f.check_box :remember_me, :tabindex => "0" %>
          <br />
          <%= submit_tag 'Log in', :tabindex => "3" %>
          <br />
        <% end %>
        
        <%= set_focus_to_id 'user_login' %>

When the login form is shown the focus will be set to the login text field. Of course java script needs to be enambled otherwise they will have to do it manually.

"Setting the focus in a form" by Chad H

Sun, 29 Oct 2006 16:27:20 -0800

You can also use prototype/scriptaculous and type: Element.focus('domid');

"Setting the focus in a form" by wolfman

Sun, 29 Oct 2006 19:13:39 -0800

Thats cool thanks, the reason I posted this is because 10 minutes of Googling didn't bring up too many Rails specific methods to do it.

"Setting the focus in a form" by eric

Sat, 02 Dec 2006 15:01:48 -0800

You can simplify your helper to three lines, thanks to prototype: def set_focus_to_id(id) javascript_tag("$('#{id}').focus()"); end

"Setting the focus in a form" by Julian

Sun, 07 Sep 2008 08:04:52 -0700

Thanks for sharing this useful little snippet, it slotted into what I'm doing and worked first time!

"Setting the focus in a form" by Skip

Mon, 26 Jan 2009 13:11:17 -0800

This worked great until I pointed IE6 at it and the page appeared blank even though the source could be seen and was valid. Finally figured out that resizing the window manually made it visible and so I added: if (navigator.appVersion < "7" && navigator.appName == "Microsoft Internet Explorer") { function winalign() { window.resizeBy(-10,-10); setTimeout("window.resizeBy(10,10);",200); } window.onload=function(){winalign();}; } If there is a less ugly way to make this work, I'd love to know.

"Setting the focus in a form" by wolfman

Mon, 26 Jan 2009 14:07:36 -0800

I suspect this has something to do with the timing of when the script is executed, and whether the page has fully loaded. JQuery has a solution to this with the $(document).ready(function() { // do stuff when DOM is ready }); So if you were to put the javascript in that function I suspect it will work even on a broken IE6

"Setting the focus in a form" by John

Sun, 17 Jan 2010 08:41:18 -0800

After much googling....your's was the most elegant and simple! Thanks!

"Setting the focus in a form" by Jim

Thu, 28 Jan 2010 07:25:44 -0800

To resolve IE6 issues. Works in other browsers as well. document.observe("dom:loaded", function() { $('my_control_id').focus() });