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?


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"

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'

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"

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


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"

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
});

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,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.