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

144

Как я могу добавить placeholderтекст в мои f.text_fieldполя, чтобы текст по умолчанию был написан заранее, и когда пользователь щелкает внутри полей, текст исчезает, позволяя пользователю вводить новый текст?

NullVoxPopuli
источник
HTML5 поддерживает это. Между тем, есть решения для JavaScript .
ghoppe
3
Я предлагаю добавить ответ nslocum вместо моего. Его правильно для Rails 3.
Чак Каллебс

Ответы:

269

С рельсами> = 3.0 вы можете просто использовать эту placeholderопцию.

f.text_field :attr, placeholder: "placeholder text"
nslocum
источник
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'
Zoltan
источник
15

Для тех, кто использует Rails (4.2) Интернационализация (I18n):

Установите для атрибута заполнителя значение true:

f.text_field :attr, placeholder: true

и в вашем локальном файле (то есть. en.yml):

en:
  helpers:
    placeholder:
      model_name:
        attr: "some placeholder text"
cweston
источник
Спасибо, что сработало. Я не установил placeholder: true. После настройки, как вы описали, это сработало.
Хендрик
2

Вот намного более чистый синтаксис при использовании rails 4+

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

Так что rails 4+теперь можно использовать этот синтаксис вместо синтаксиса хеша

Abhilash
источник
1
Чем он отличается от принятого ответа @nslocum?
млт
@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"похоже, хороший подход.
Натан