Ruby on Rails：如何将占位符文本添加到 f.text_field？答案

【问题标题】：Ruby on Rails: How do I add placeholder text to a f.text_field?Ruby on Rails：如何将占位符文本添加到 f.text_field？
【发布时间】：2010-07-15 19:31:33
【问题描述】：

如何将 placeholder 文本添加到我的 f.text_field 字段中，以便默认情况下预先编写文本，并且当用户在字段内单击时，文本消失 - 允许用户输入新的文字？

【问题讨论】：

HTML5 支持这个。同时还有javascript solutions。
我建议添加 nslocum 的答案而不是我的。他对 Rails 3 是正确的。

标签： ruby-on-rails

【解决方案1】：

使用 rails >= 3.0，您可以简单地使用 placeholder 选项。

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

【讨论】：

只有支持 HTML5 的浏览器才支持“placeholder”属性，不包括 Internet Explorer 等浏览器。
jQuery 修复的正确 URL 是 hagenburger.net/BLOG/…
@KDP：在 Rails 2 中似乎是一样的，尽管您可能需要旧的属性语法：f.text_field :attr, :placeholder => "placeholder text"
是否可以添加长文本（可能作为单独的 html 文件）作为占位符？我正在尝试为用户提供一个模板来编写他们的内容。

【解决方案2】：

在 Rails 4 中（使用 HAML）：

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

【讨论】：

【解决方案3】：

对于那些使用 Rails(4.2) 国际化 (I18n) 的人：

将占位符属性设置为true：

f.text_field :attr, placeholder: true

并在您的本地文件（即 en.yml）中：

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

【讨论】：

感谢工作。我没有设置placeholder: true。像你描述的那样设置后它起作用了。

【解决方案4】：

我尝试了上面的解决方案，它看起来像在 rails 5.* 默认情况下第二个参数是输入表单的值，对我有用的是：

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

【讨论】：

【解决方案5】：

如果使用rails 4+，这里的语法会更简洁

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

所以rails 4+ 现在可以使用这种语法而不是哈希语法

【讨论】：

它与接受的@nslocum 答案有何不同？
@mlt 提供此答案后，接受的答案已更新为类似。

【解决方案6】：

在您的视图模板中，设置一个默认值：

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

在你的 Javascript 中（假设这里是 jquery）：

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

【讨论】：

赫芬顿邮报的搜索字段在输入元素中使用了这段 JS：onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post" 似乎是一个不错的方法。