Ruby on Rails: Wie füge ich einem f.text_field Platzhaltertext hinzu?

144

Wie kann ich placeholdermeinen f.text_fieldFeldern Text hinzufügen , sodass der Text standardmäßig vorab geschrieben wird. Wenn ein Benutzer in die Felder klickt, wird der Text ausgeblendet, sodass der Benutzer den neuen Text eingeben kann.

NullVoxPopuli
quelle
HTML5 unterstützt dies. In der Zwischenzeit gibt es Javascript-Lösungen .
Ghoppe
3
Ich schlage vor, nslocums Antwort anstelle meiner hinzuzufügen. Sein ist korrekt für Rails 3.
Chuck Callebs

Antworten:

269

Mit Schienen> = 3.0 können Sie einfach die placeholderOption verwenden.

f.text_field :attr, placeholder: "placeholder text"
nslocum
quelle
4
Das Attribut "Platzhalter" wird nur von HTML5 unterstützt, das Browser unterstützt, wobei Browser wie Internet Explorer weggelassen werden.
Travis-146
1
Die korrekte URL für jQuery Fix ist hagenburger.net/BLOG/…
szeryf
1
@ KDP: Es scheint das gleiche in Rails 2 zu sein, obwohl Sie möglicherweise die alte Attributsyntax benötigen:f.text_field :attr, :placeholder => "placeholder text"
mwfearnley
Ist es möglich, einen langen Text - möglicherweise als separate HTML-Datei - als Platzhalter hinzuzufügen? Ich versuche, eine Vorlage für Benutzer bereitzustellen, in die sie ihren Inhalt schreiben können.
sofarsophie
32

In Rails 4 (mit HAML):

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

Für Benutzer von Rails (4.2) Internationalisierung (I18n):

Setzen Sie das Platzhalterattribut auf true:

f.text_field :attr, placeholder: true

und in Ihrer lokalen Datei (dh en.yml):

en:
  helpers:
    placeholder:
      model_name:
        attr: "some placeholder text"
cweston
quelle
Danke, das hat funktioniert. Ich habe das nicht eingestellt placeholder: true. Nachdem Sie das so eingestellt haben, wie Sie es beschrieben haben, hat es funktioniert.
Hendrik
2

Hier ist eine viel sauberere Syntax, wenn Sie verwenden rails 4+

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

So rails 4+kann nun diese Syntax verwendet anstelle der Hash - Syntax

Abhilash
quelle
1
Wie unterscheidet es sich von der akzeptierten @ nslocum-Antwort?
Mlt
@mlt Die akzeptierte Antwort wurde nach Bereitstellung dieser Antwort auf ähnlich aktualisiert.
Abhilash
2

Ich habe die obigen Lösungen ausprobiert und es sieht aus wie auf Schienen 5. * Das zweite Argument ist standardmäßig der Wert des Eingabeformulars. Was für mich funktioniert hat, war:

text_field_tag :attr, "", placeholder: "placeholder text"
Prosper Opara
quelle
1

Legen Sie in Ihrer Ansichtsvorlage einen Standardwert fest:

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

In Ihrem Javascript (unter der Annahme, dass hier abgefragt wird):

$(document).ready(function() {
  //add a handler to remove the text
});
Jed Schneider
quelle
1
Das Suchfeld der Huffington Post verwendet dieses JS-Bit im Eingabeelement: onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"Scheint ein guter Ansatz zu sein.
Nathan