Ruby on Rails:如何将占位符文本添加到f.text_field?


144

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


HTML5支持此功能。同时,有javascript解决方案
ghoppe

3
我建议添加nslocum的答案,而不是我的答案。他是为Rails 3正确的
查Callebs

Answers:


269

如果rails> = 3.0,则可以简单地使用该placeholder选项。

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

4
只有HTML5支持的浏览器才支持“占位符”属性,而没有Internet Explorer之类的浏览器。
travis-146

1
jQuery的修复正确的URL是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

对于使用Rails(4.2)国际化(I18n)的用户:

将占位符属性设置为true:

f.text_field :attr, placeholder: true

并在您的本地文件(即en.yml)中:

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

谢谢你的工作。我没有设置placeholder: true。像您描述的那样进行设置后,它可以工作。
Hendrik

2

如果使用,这是一种更简洁的语法 rails 4+

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

因此rails 4+,现在可以使用此语法而不是哈希语法


1
它与接受的@nslocum答案有何不同?
mlt

@mlt提供此答案后,接受的答案已更新为类似答案。
Abhilash

2

我尝试了上面的解决方案,它看起来像在Rails 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
《赫芬顿邮报》的搜索字段在输入元素中使用了这部分JS:onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"似乎是一种好方法。
弥敦道
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.