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

这些文本字段看起来很棒，在Facebook等网站2.0上很常见。Rails text_field默认值在点击（和变暗）时消失

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

到目前为止，这是我如何被创建它们：

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

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

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

来源

2009-09-26 Brian Armstrong

只是珍玩，布莱恩，你从哪里得到不断DEFAULT_VALUE？你是如何设置它以及在哪里的？ – 2012-09-05 06:41:16

这是一个可以在任何地方定义的常量。 – 2012-09-06 08:50:14

这是因为

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

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

UPD：客户端ckeck的样品的jQuery：

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

来源

2009-09-26 17:34:58 Anatoliy

好主意，我想它必须是一个客户端检查与JavaScript权利？如果任何人都可以提供一个很棒的例子。 – 2009-09-26 18:07:29

当然。更新... – Anatoliy 2009-09-26 18:23:26

还检查了HintValue，一个JavaScript库，做到这一点：http://projects.functino.com/hintvalue/

来源

2010-11-04 10:12:46

对于轨道的新版本，你应该使用

text_field_tag'search'，nil，：placeholder =>'输入搜索字词''

检查这里的text_field_tag documentation

来源

2012-11-26 01:05:09 llazzaro

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

回答

相关问题