Ruby on Rails：f.text_fieldにプレースホルダーテキストを追加するにはどうすればよいですか？

144

placeholderテキストをf.text_fieldフィールドに追加して、テキストがデフォルトで事前に書き込まれ、ユーザーがフィールド内をクリックするとテキストが消えて、ユーザーが新しいテキストを入力できるようにするにはどうすればよいですか？

ruby-on-rails

— NullVoxPopuli
ソース

HTML5はこれをサポートします。それまでの間、javascriptソリューションがあります。

— ghoppe

3

私の代わりにnslocumの答えを追加することをお勧めします。彼はRailsの3のために正しいです

— チャックCallebs

269

レール> = 3.0では、placeholderオプションを使用するだけです。

f.text_field :attr, placeholder: "placeholder text"

— nslocum
ソース

4

「プレースホルダー」属性は、HTML5をサポートするブラウザーでのみサポートされ、Internet Explorerなどのブラウザーは除外されます。

— travis-146 2011

1

jQuery修正の正しいURLはhagenburger.net/BLOG/…です

— szeryf

1

@KDP：あなたが古い属性構文を必要とするかもしれないが、Railsの2に同じであるように思わ：f.text_field :attr, :placeholder => "placeholder text"

— mwfearnley

長いテキストを（おそらく別のHTMLファイルとして）プレースホルダーとして追加することはできますか？ユーザーがコンテンツを書き込むためのテンプレートを提供しようとしています

— 。–ソファーフィー

32

Rails 4（HAMLを使用）：

=f.text_field :first_name, class: 'form-control', autofocus: true, placeholder: 'First Name'

— ゾルタン
ソース

15

Rails（4.2）国際化（I18n）を使用している場合：

プレースホルダー属性をtrueに設定します。

f.text_field :attr, placeholder: true

そしてあなたのローカルファイル（すなわちen.yml）：

en:
  helpers:
    placeholder:
      model_name:
        attr: "some placeholder text"

— Cweston
ソース

うまくいきました。設定しませんでしたplaceholder: true。あなたが説明したように設定した後、それは機能しました。

— Hendrik

2

以下を使用すると、より明確な構文になります rails 4+

<%= f.text_field :attr, placeholder: "placeholder text" %>

だから、rails 4+今のハッシュ構文の代わりにこの構文を使用することができます

— アビラッシュ
ソース

1

受け入れられた@nslocumの回答とどう違うのですか？

— mlt

@mlt承認された回答は、この回答を提供した後に類似のものに更新されました。

— Abhilash、2018

2

上記の解決策を試しましたが、レール5のように見えます。*デフォルトの2番目の引数は入力フォームの値です。

text_field_tag :attr, "", placeholder: "placeholder text"

— 繁栄オパラ
ソース

1

ビューテンプレートで、デフォルト値を設定します。

f.text_field :password, :value => "password"

あなたのJavascriptで（ここではjqueryを想定しています）：

$(document).ready(function() {
  //add a handler to remove the text
});

— ジェッド・シュナイダー
ソース

1

Huffington Postの検索フィールドでは、input要素内でこのJSのビットを使用していますonfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"。良いアプローチのようです。

— ネイサン