Rails text_field 默认值在单击时消失（并变暗）答案

【问题标题】：Rails text_field default value disappear on click (and dimmed)Rails text_field 默认值在单击时消失（并变暗）
【发布时间】：2009-09-26 16:45:32
【问题描述】：

这些文本字段看起来很棒，并且在 Facebook 等 web 2.0 网站上很常见。

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

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

# 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';}" %>

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

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

【问题讨论】：

只是古玩，Brian，你从哪里得到常量 DEFAULT_VALUE？你是怎么设置的？在哪里设置的？
它是一个可以在任何地方定义的常量。

标签： javascript ruby-on-rails

【解决方案1】：

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

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

在这里查看text_field_tag documentation

【讨论】：

【解决方案2】：

这是因为

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

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

upd: 客户端 ckeck 示例 jQuery：

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

【讨论】：

好主意，我想它必须是使用 javascript 的客户端检查，对吧？如果有人能提供一个这样的例子，那就太棒了。

【解决方案3】：

还可以查看 HintValue，这是一个执行此操作的 JavaScript 库：http://projects.functino.com/hintvalue/

【讨论】：