Topic: setting default focus on page load

I'd like to set the default focus to a specific field when the screen first loads.  I think Javascript is the way to go, but I'm not so good with Javascript.  I found this, but I'm not using "brail" (not even sure what that is).  Can someone either help me rewrite this or find another way?

Thanks!

Found on: http://joeydotnet.com/blog/archive/2007 … brary.aspx


views/common/defaultFocus.brail
<script type="text/javascript">
     Event.observe(window, 'load', function() { document.getElementById('<?brail output controlIdToFocus ?>').focus(); });
</script>


views/home/index.brail
   <?brail OutputSubView('/common/defaultFocus', { 'controlIdToFocus':'searchCriteria' }) ?>   
   <input type="text" name="searchCriteria" id="searchCriteria" />

Re: setting default focus on page load

By the way, I *do* know that I can set it manually on every page:

<script type="text/javascript">
   Event.observe(window, 'load', function() {document.getElementById('field_name_here').focus();});
</script>


I get confused when you move the <script> into a separate field and use a variable for the field name.  How do I call it and specify which field?

Re: setting default focus on page load

Here's what I use. Put this in your application_helper.rb.

  # put this in the body after a form to set the input focus to a specific control id
  # at end of rhtml file: <%= set_focus_to_id 'form_field_label' %>
  def set_focus_to_id(id)
    javascript_tag("$('#{id}').focus()");
  end

Then, like the comment says, use the function in your views.

Re: setting default focus on page load

Perfect!  Thanks!  smile

Re: setting default focus on page load

It doesn't work for me and I can't fifure out why. Tha's what I have in my form:

<h4>New country</h4>

<% form_for(@country) do |f| %>
<%= set_focus_to_id 'country_name' %>
  <%= f.error_messages %>

  <%= render :partial => 'country', :object=> f%>

  <p>
    <%= submit_button "Create" %>
  </p>
<% end %>

<%= link_to 'Back', countries_path %>


Even if I move the code inside the partial _country.html.erb:
<p>
<%= set_focus_to_id 'country_name' %>
  <%= country.label :name %><br />
  <%= country.text_field :name %>
</p>

it doesn't work nomore. Any ideas?

Last edited by Javix (2009-07-08 05:56:20)

Re: setting default focus on page load

Javix wrote:

It doesn't work for me and I can't fifure out why.

Javix,

It did not work for 2 reasons.

1. This solution requires jQuery.  Save a copy of the most recent version of jQuery to your public/javascripts directory, and call it in your page header (with the proper version number, of course):

<%= javascript_include_tag 'jquery-1.4.2.min' %>

2. There is a typo in faster's code above.  It required another number-sign like this:

  # put this in the body after a form to set the input focus to a specific control id
  # at end of rhtml file: <%= set_focus_to_id 'form_field_label' %>
  def set_focus_to_id(id)
    javascript_tag("$('##{id}').focus()");
  end

Last edited by kingjeffrey (2010-03-08 13:03:12)