Ruby on Rails: Jak dodać tekst zastępczy do pola f.text_field?

144

Jak mogę dodać placeholdertekst do moich f.text_fieldpól, aby tekst był domyślnie napisany z góry, a gdy użytkownik kliknie wewnątrz pól, tekst znika - umożliwiając użytkownikowi wpisanie nowego tekstu?

NullVoxPopuli
źródło
HTML5 obsługuje to. W międzyczasie dostępne są rozwiązania javascript .
ghoppe
3
Sugeruję dodanie odpowiedzi nslocum zamiast mojej. Jego jest poprawne dla Rails 3.
Chuck Callebs

Odpowiedzi:

269

W przypadku rails> = 3.0 możesz po prostu użyć tej placeholderopcji.

f.text_field :attr, placeholder: "placeholder text"
nslocum
źródło
4
Atrybut „symbol zastępczy” jest obsługiwany tylko przez przeglądarki obsługujące HTML5, z pominięciem przeglądarek, takich jak Internet Explorer.
travis-146
1
Prawidłowy adres URL dla poprawki jQuery to hagenburger.net/BLOG/ ...
szeryf
1
@KDP: Wydaje się, że wygląda to tak samo w Railsach 2, chociaż możesz potrzebować starej składni atrybutu:f.text_field :attr, :placeholder => "placeholder text"
mwfearnley
Czy można dodać długi tekst - może jako osobny plik html - jako symbol zastępczy? Próbuję udostępnić użytkownikom szablon, w którym
mogliby
32

W Rails 4 (przy użyciu HAML):

=f.text_field :first_name, class: 'form-control', autofocus: true, placeholder: 'First Name'
Zoltan
źródło
15

Dla osób używających Rails (4.2) Internationalization (I18n):

Ustaw atrybut zastępczy na true:

f.text_field :attr, placeholder: true

oraz w swoim lokalnym pliku (np. en.yml):

en:
  helpers:
    placeholder:
      model_name:
        attr: "some placeholder text"
cweston
źródło
Dzięki, że zadziałało. Nie ustawiłem placeholder: true. Po ustawieniu tak jak opisałeś to zadziałało.
Hendrik
2

Oto znacznie czystsza składnia, jeśli używasz rails 4+

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

Więc rails 4+może teraz użyć tej składni zamiast składni skrótu

Abhilash
źródło
1
Czym różni się od zaakceptowanej odpowiedzi @nslocum?
mlt
@mlt Zaakceptowana odpowiedź została zaktualizowana do podobnej po udzieleniu tej odpowiedzi.
Abhilash
2

Wypróbowałem powyższe rozwiązania i wygląda jak na szynach 5. * drugi agument domyślnie to wartość z formularza wejściowego, co u mnie zadziałało to:

text_field_tag :attr, "", placeholder: "placeholder text"
Prosper Opara
źródło
1

W szablonie widoku ustaw wartość domyślną:

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

W Twoim Javascript (zakładając tutaj jquery):

$(document).ready(function() {
  //add a handler to remove the text
});
Jed Schneider
źródło
1
Pole wyszukiwania Huffington Post wykorzystuje ten fragment kodu JS wewnątrz elementu wejściowego: onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"Wydaje się, że to dobre podejście.
Nathan,