How to add HTML5 auto focus to a rails form?

Question

I have a text field

  = text_field_tag('search_text_1', params[:search_text],
    options = {:type => 'search'} )

which generates

<input id="search_text" name="search_text_1" type="search">

that I want to add HTML5 autofocus to, as in

  = text_field_tag('search_text_1', params[:search_text], 
    options = {:type => 'search', :autofocus => true} )

This generates

<input autofocus="autofocus" id="search_text" name="search_text_1" type="search">

which does actually work, but how I can I get the actual HTML output for the autofocus to be as the HTML spec shows, i.e.

<input autofocus id="search_text" name="search_text_1" type="search" autofocus>
# Not sure where it goes or if that matters

Using

options = {:type => 'search', :autofocus }

gives

.../_search.html.haml:2: syntax error, unexpected '}', expecting => 
...:type => 'search', :autofocus } )

As the HTML5 spec at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input says, "which is a Boolean"

possible duplicate of [Rails 3 & HTML 5 Microdata](http://stackoverflow.com/questions/4867404/rails-3-html-5-microdata) — Brad Werth, Sep 25 '14 at 22:56
But I guess you could [use haml](http://stackoverflow.com/questions/6244052/empty-attribute-with-ruby-haml)... — Brad Werth, Sep 25 '14 at 22:57
Either way, [it's valid](http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute). — Brad Werth, Sep 25 '14 at 22:59

score 3 · Answer 1 · answered Sep 26 '14 at 14:10

If you’re willing to patch a private Rails method you can achieve the output you want. Rails writes out boolean attributes with the boolean_tag_option method in the TagHelper module which produces the autofocus='autofocus' format.

If you add the following to an initializer you can replace this method with one that writes out the attribute in the minimized format.

module ActionView::Helpers::TagHelper
  private def boolean_tag_option(key)
    key
  end
end

Obviously you need to be careful when upgrading the version of Rails your app is using. This method seems fairly stable at the moment, it is still there in 4.2.0.beta.1 and master.

score 2 · Accepted Answer · answered Sep 26 '14 at 13:41

2

I ended up going with

= text_field_tag('search_text_1', 
  params[:search_text], 
  options = {:type => 'search', :autofocus => true })

and accepting the output of autofocus='autofocus'

answered Sep 26 '14 at 13:41

Michael Durrant

93,410
97
333
497

How to add HTML5 auto focus to a rails form?

2 Answers2

Linked