Ruby on Rails: Bagaimana cara saya menambahkan teks placeholder ke f.text_field?

144

Bagaimana saya bisa menambahkan placeholderteks ke f.text_fieldbidang saya sehingga teks datang pra-ditulis secara default, dan ketika pengguna mengklik di dalam bidang, teks hilang - memungkinkan pengguna untuk mengetik teks baru?

NullVoxPopuli
sumber
HTML5 Mendukung ini. Sementara itu, ada solusi javascript .
ghoppe
3
Saya sarankan menambahkan jawaban nslocum, bukan jawaban saya. Itu benar untuk Rails 3.
Chuck Callebs

Jawaban:

269

Dengan rel> = 3.0, Anda cukup menggunakan placeholderopsi.

f.text_field :attr, placeholder: "placeholder text"
nslocum
sumber
4
Atribut "placeholder" hanya didukung oleh browser pendukung HTML5, meninggalkan browser seperti Internet Explorer.
travis-146
1
URL yang benar untuk perbaikan jQuery adalah hagenburger.net/BLOG/…
szeryf
1
@ PPK: Tampaknya sama di Rails 2, meskipun Anda mungkin memerlukan sintaks atribut lama:f.text_field :attr, :placeholder => "placeholder text"
mwfearnley
Apakah mungkin menambahkan teks panjang - mungkin sebagai file html terpisah - sebagai pengganti? Saya mencoba menyediakan templat bagi pengguna untuk menulis konten mereka.
sofarsophie
32

In Rails 4 (Menggunakan HAML):

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

Bagi mereka yang menggunakan Rails (4.2) Internasionalisasi (I18n):

Setel atribut placeholder menjadi true:

f.text_field :attr, placeholder: true

dan di file lokal Anda (mis. en.yml):

en:
  helpers:
    placeholder:
      model_name:
        attr: "some placeholder text"
cweston
sumber
Terima kasih, itu berhasil. Saya tidak mengatur placeholder: true. Setelah pengaturan seperti yang Anda gambarkan itu berhasil.
Hendrik
2

Berikut ini sintaks yang lebih bersih jika menggunakan rails 4+

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

Jadi rails 4+sekarang bisa menggunakan sintaks ini bukan sintaks hash

Abhilash
sumber
1
Apa bedanya dengan jawaban @nslocum yang diterima?
mlt
@mlt Jawaban yang diterima diperbarui untuk serupa setelah memberikan jawaban ini.
Abhilash
2

Saya mencoba solusi di atas dan sepertinya pada rails 5. * agumen kedua secara default adalah nilai dari form input, yang bekerja untuk saya adalah:

text_field_tag :attr, "", placeholder: "placeholder text"
Opara Makmur
sumber
1

Di templat tampilan Anda, tetapkan nilai default:

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

Di Javascript Anda (dengan asumsi jquery di sini):

$(document).ready(function() {
  //add a handler to remove the text
});
Jed Schneider
sumber
1
Bidang pencarian Huffington Post menggunakan sedikit JS ini di dalam elemen input: onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"Sepertinya pendekatan yang bagus.
Nathan