Rails text_field默认值在点击时消失(并且变暗)

Question

这些文本字段看起来很棒,在Facebook等网站上很常见.

基本上不是标记文本字段,而是通过将标签放在文本字段中来节省空间.通常,文本的颜色会变暗,当用户在文本字段中单击时,默认值会消失,颜色会切换为黑色或常规颜色,以便用户输入文本.

到目前为止,这就是我创建它们的方式:

# DEFAULT_VALUE = "email address"

<%= f.text_field :email,
      :style => "color:#aaa;",
      :value => DEFAULT_VALUE,
      :onfocus => "if(this.getValue()=='#{DEFAULT_VALUE}'){this.clear();this.style.color = '#000';}",
      :onblur => "if(this.getValue()==''){this.setValue('#{DEFAULT_VALUE}');this.style.color = '#aaa';}" %> 

这基本上有效.但是我注意到的一个问题是,如果你在字段中键入内容并提交失败的表单,表单将重新加载你在字段中输入的内容(应该如此),但文本被错误地调暗.如果您单击浏览器,也会发生这种情况.它将显示您输入的文本(不是默认值),但文本颜色会变暗.

有没有更简单的方法来解决上述问题？谢谢!

Answer 1

对于较新版本的rails,您应该使用

text_field_tag'search',nil,:placeholder =>'输入搜索词......'

在此处查看text_field_tag文档

Answer 2

这是因为

:style => "color:#aaa;",

您应该添加条件来检查输入的值和默认值。

更新：客户端 ckeck jquery 示例：

$(document).ready(function () {
    $input = $('input#id');
    $input.css('color', $input.val() === DEFAULT_VALUE ? '#aaa' : '#000');
})