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?


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"

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'

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"

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


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"

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

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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.