Ruby on rails forms: how to put text in an input field that disappears when clicked

Question

I want to create a form that does not have a label, and instead places the directions inside the actual text input box. I also want the directions to disappear when you click the text box.

Here is an example http://www.dailyblogtips.com/wp-content/uploads/searchform.png

I know in html, you are doing something like this

<input type="text" name="s" id="s" value="Text to be displayed here" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> 

But how can I accomplish this using rails shape helpers.

That's what i still have

  <div class="row"> <div class="small-12 columns"> <div class="panel"> <%= form_for(@message) do |f| %> <%= f.label :body, "Description" %> <%= f.text_area :body %> <%= f.submit 'Create message', class: 'button small secondary' %> <% end %> </div> </div> </div> 

Answer 1

I would try the placeholder attribute, it will work only with newer browsers, but there are several jQuery libraries that will automatically detect those that do not support it and do more or less the same as your javscript snippet does. Here is an example using a placeholder field:

 <%= f.text_field :field_name, :placeholder => "Disappearing Text" %> 

Edit: Here is a solid jQuery fallback plugin:

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Answer 2

In html, the preliminary text in the input is called the placeholder attribute.

You can add this attribute to the tagged fields of form_for :

 <%= f.text_field :some_data, :placeholder => "value" %> 

BUT, when executing the placeholder attribute, beware that it is not fully supported in older versions of some browsers. Therefore, often some JS is required to polyphilize this functionality ... you should take care of this if you do not use traditional labels next to input fields.