Text Field Tag Placeholder Returning As Value

thank_you picture thank_you · Nov 20, 2012 · Viewed 14.6k times · Source

I have a form and inside the form there is a text_field_tag. It is written as this...

<%= text_field_tag "search",  :placeholder => 'Enter search term...' %>

However, when the HTML is generated this returns in the page source...

<input id="search" name="search" type="text" value="{:placeholder=&gt;&quot;Enter search 
term...&quot;}" />

Why is it doing this and how do I fix it so that placeholder works?

Answer

MrYoshiji picture MrYoshiji · Nov 20, 2012

The second parameter of the text_field_tag is the value. Give it nil to have it empty:

<%= text_field_tag "search", nil, :placeholder => 'Enter search term...' %>

And give it a String to have a default value:

<%= text_field_tag "search", 'Enter search term...' %>

Add an onclick event to empty it with jQuery:

<%= text_field_tag "search", 'Enter search term...', :onclick => 'if($(this).val()=="Enter search term..."){$(this).val("");};' %>

Edit 2016:

Nowadays, most of the browsers now support the HTML 5 placeholder, which allows us to do this in a cleaner way:

<%= text_field_tag 'search', nil, placeholder: 'Enter search term' %>
# which produces the following HTML:
<input type="text" value="" placeholder="Enter search term">

jsFiddle link