javascript - Rails text_field default value disappear on click (and dimmed) - Stack Overflow

admin管理员组

文章数量:1277899

These text fields look great and are mon on web 2.0 sites like Facebook.

Basically instead of labeling the text field, you can save space by putting the label inside the text field. Typically the text is dimmed in color a bit, and when the user clicks in the text field the default value disappears, and the color switches to black or the regular color so the user can enter text.

So far this is how I've been creating them:

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

This basically works. But one problem I've noticed is that if you type something in the field and submit a form that fails, the form will reload with what you typed in the field (as it should) but the text is incorrectly dimmed. This also happens if you click back on your browser..it will display the text you entered (not the default value) but the text color is dimmed.

Is there an easier way to do this or way to solve the above problem? Thanks!

These text fields look great and are mon on web 2.0 sites like Facebook.

Basically instead of labeling the text field, you can save space by putting the label inside the text field. Typically the text is dimmed in color a bit, and when the user clicks in the text field the default value disappears, and the color switches to black or the regular color so the user can enter text.

So far this is how I've been creating them:

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

This basically works. But one problem I've noticed is that if you type something in the field and submit a form that fails, the form will reload with what you typed in the field (as it should) but the text is incorrectly dimmed. This also happens if you click back on your browser..it will display the text you entered (not the default value) but the text color is dimmed.

Is there an easier way to do this or way to solve the above problem? Thanks!

• javascript
• ruby-on-rails

Share Improve this question Follow edited Dec 29, 2011 at 16:56 Rob W 349k8787 gold badges807807 silver badges682682 bronze badges asked Sep 26, 2009 at 16:45 Brian ArmstrongBrian Armstrong 19.9k1717 gold badges118118 silver badges144144 bronze badges 2

• just curios, Brian, where did you get the constant DEFAULT_VALUE? how did you set it and where? – E.E.33 Commented Sep 5, 2012 at 6:41
• It is a constant that could be defined anywhere. – Brian Armstrong Commented Sep 6, 2012 at 8:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

For newer version of rails you should use

text_field_tag 'search', nil, :placeholder => 'Enter search term...'

check here for the text_field_tag documentation

This is because

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

You should add condition, that checks entered value and default value.

upd: sample of client side ckeck jquery:

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

Also check out HintValue, a JavaScript library that does this: http://projects.functino./hintvalue/

本文标签： javascriptRails textfield default value disappear on click (and dimmed)Stack Overflow