Ruby on Rails: Як додати текст заповнення до поля f.text_field?


144

Як я можу додати placeholderтекст до моїх f.text_fieldполів, щоб текст був попередньо написаний за замовчуванням, а коли користувач натискає всередину полів, текст відходить, що дозволяє користувачеві вводити новий текст?


HTML5 Це підтримує. Тим часом існують рішення javascript .
ghoppe

3
Я пропоную додати відповідь nslocum замість моєї. Його правильно для Rails 3.
Чак Каллебс

Відповіді:


269

З рейками> = 3.0 ви можете просто скористатися placeholderопцією.

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

4
Атрибут "placeholder" підтримується лише браузерами, що підтримують HTML5, не залишаючи таких веб-переглядачів, як Internet Explorer.
travis-146

1
Правильна URL-адреса для виправлення jQuery - hagenburger.net/BLOG/…
szeryf

1
@KDP: Схоже, це саме в Rails 2, хоча вам може знадобитися старий синтаксис атрибута:f.text_field :attr, :placeholder => "placeholder text"
mwfearnley

Чи можна додати довгий текст - можливо, як окремий файл HTML - як заповнювач? Я намагаюся надати шаблон, щоб користувачі могли писати свій вміст.
sofarsophie

32

У Rails 4 (за допомогою HAML):

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

15

Для тих, хто використовує рейли (4.2) Інтернаціоналізація (I18n):

Встановіть атрибут заповнення на true:

f.text_field :attr, placeholder: true

і у вашому локальному файлі (тобто en.yml):

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

Дякую, що спрацювало. Я не встановив placeholder: true. Після налаштування такого, як ви описали, він працював.
Гендрік

2

Ось набагато чистіший синтаксис, якщо використовується rails 4+

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

Тому rails 4+тепер можна використовувати цей синтаксис замість хеш-синтаксису


1
Чим вона відрізняється від прийнятої @nslocum відповіді?
mlt

@mlt Прийняту відповідь оновлено до аналогічної після надання цієї відповіді.
Абхілаш

2

Я спробував рішення вище, і це виглядає як на рейках 5. * другим об'єктом за замовчуванням є значення форми вводу, що для мене працювало:

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

1

У шаблоні перегляду встановіть значення за замовчуванням:

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

У вашому Javascript (якщо припустити jquery тут):

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

1
Поле пошуку Huffington Post використовує цей біт JS всередині вхідного елемента: onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"Схоже, хороший підхід.
Натан
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.