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 =＆gt; '输入搜索字词...'

点击此处查看text_field_tag documentation

Answer 2

这是因为

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

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

upd：客户端ckeck的示例 jquery的：

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

Answer 3

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

Rails text_field默认值在点击时消失（并且变暗）

3 个答案: