Rails text_field La valeur par défaut disparaît lors du clic (et estompée)

Question

Ces champs de texte sont géniaux et sont courants sur les sites Web 2.0 tels que Facebook. Fondamentalement, au lieu d'étiqueter le champ de texte, vous pouvez économiser de l'espace en plaçant l'étiquette dans le champ de texte. Généralement, le texte est légèrement grisé et lorsque l'utilisateur clique dans le champ de texte, la valeur par défaut disparaît et la couleur passe au noir ou à la couleur normale pour que l'utilisateur puisse entrer du texte.

Jusqu'à présent, c'est ainsi que je les ai créais:

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

Cela fonctionne essentiellement. Mais un problème que j'ai remarqué est que si vous tapez quelque chose dans le champ et soumettez un formulaire qui échoue, le formulaire rechargera avec ce que vous avez tapé dans le champ (comme il se doit) mais le texte n'est pas correctement grisé. Cela se produit également si vous cliquez sur votre navigateur .. il affichera le texte que vous avez entré (pas la valeur par défaut) mais la couleur du texte est grisée.

Existe-t-il un moyen plus simple de le faire ou de résoudre le problème ci-dessus? Merci!

Answer 1

C'est parce que

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

Vous devez ajouter la condition, que les contrôles sont entrées valeur et la valeur par défaut.

màj: échantillon de côté client ckeck jquery:

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

Answer 2

Consultez également HintValue, une bibliothèque JavaScript qui fait cela: http://projects.functino.com/hintvalue/

Answer 3

Pour la version plus récente de rails, vous devez utiliser

text_field_tag ​​'recherche', nil,: placeholder => 'Entrer le terme de recherche ...'

vérifiez ici le text_field_tag documentation