Ruby on Rails: Bir f.text_field'a yer tutucu metni nasıl eklerim?


144

placeholderMetinleri f.text_fieldvarsayılan olarak önceden yazılmış olarak gelecek şekilde alanlarıma nasıl metin ekleyebilirim ve bir kullanıcı alanların içini tıklattığında metin kaybolur - kullanıcının yeni metni yazmasına izin verir?


HTML5 Bunu destekler. Bu arada javascript çözümleri var .
ghoppe

3
Benim yerine nslocum'un cevabını eklemenizi öneririm. Rails 3 için doğru.
Chuck Callebs

Yanıtlar:


269

> = 3.0 rayları ile placeholderseçeneği kullanabilirsiniz .

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

4
"Yer tutucu" özelliği yalnızca HTML5 destekli tarayıcılar tarafından desteklenir ve Internet Explorer gibi tarayıcıları dışarıda bırakır.
travis-146

1
JQuery düzeltmesi için doğru URL hagenburger.net/BLOG/…
szeryf

1
@KDP: Rails 2'de aynı gibi görünüyor, ancak eski özellik sözdizimine ihtiyacınız olabilir:f.text_field :attr, :placeholder => "placeholder text"
mwfearnley

Yer tutucu olarak uzun bir metni - belki de ayrı bir html dosyası olarak - eklemek mümkün müdür? Kullanıcıların içeriklerini yazmaları için bir şablon sağlamaya çalışıyorum.
sofarsophie

32

Rails 4'te (HAML Kullanarak):

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

15

Rails (4.2) Uluslararasılaştırma (I18n) kullananlar için:

Yer tutucu özniteliğini true olarak ayarlayın:

f.text_field :attr, placeholder: true

ve yerel dosyanızda (ör. en.yml):

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

Teşekkürler işe yaradı. Ben ayarlamadım placeholder: true. Açıkladığınız gibi ayarladıktan sonra işe yaradı.
Hendrik

2

İşte kullanıyorsanız daha temiz bir sözdizimi rails 4+

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

Yani rails 4+şimdi karma sözdizimi yerine bu sözdizimini kullanabilirsiniz


1
Kabul edilen @nslocum cevabından farkı nedir?
mlt

@mlt Kabul edilen yanıt, bu yanıtı sağladıktan sonra benzer olarak güncellendi.
Abhilash

2

Yukarıdaki çözümleri denedim ve raylar 5'e benziyor. * İkinci ajanda varsayılan olarak giriş formunun değeri, benim için ne işe yaradı:

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

1

Görünüm şablonunuzda varsayılan bir değer belirleyin:

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

Javascript'inizde (burada jquery varsayarak):

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

1
Huffington Post'un arama alanı, giriş öğesinin içinde bu JS bitini kullanır: onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"İyi bir yaklaşım gibi görünüyor.
Nathan
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.