web-dev-qa-db-ja.com

値として返されるテキストフィールドタグプレースホルダー

フォームがあり、フォーム内にtext_field_tagがあります。このように書かれています...

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

ただし、HTMLが生成されると、これはページソースに戻ります...

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

なぜこれを行うのですか？プレースホルダーが機能するように修正するにはどうすればよいですか？

htmlcssruby-on-railsruby-on-rails-3placeholder
18
jason328

Text_field_tagの2番目のパラメーターは値です。空にするためにnilを与えます：

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

そして、デフォルト値を持つ文字列を指定します。

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

Onclickイベントを追加して、jQueryで空にします。

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

2016年の編集：

現在、ほとんどのブラウザは HTML 5 placeholder をサポートしています。これにより、これをよりクリーンな方法で実行できます。

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

jsFiddleリンク

37
MrYoshiji