Wartość domyślna pola tekstowego Railsy znika po kliknięciu (i przyciemnieniu).

Question

Te pola tekstowe wyglądają świetnie i są powszechne w witrynach Web 2.0, takich jak Facebook.

Zasadniczo zamiast etykietowania pola tekstowego można zaoszczędzić miejsce, umieszczając etykietę w polu tekstowym. Zazwyczaj tekst jest nieco przyciemniony, a gdy użytkownik kliknie w polu tekstowym, wartość domyślna znika, a kolor zmienia się na czarny lub zwykły, aby użytkownik mógł wprowadzić tekst.

Jak dotąd jest to jak byłem ich tworzenia:

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

to w zasadzie działa. Ale zauważyłem, że jeśli wpiszesz coś w polu i prześlesz formularz, który się nie powiedzie, formularz przeładuje się z wpisanym tekstem (tak jak powinien), ale tekst jest niepoprawnie przyciemniony. Dzieje się tak również po kliknięciu w przeglądarce. Wyświetli się wprowadzony tekst (nie wartość domyślna), ale kolor tekstu jest przyciemniony.

Czy jest to prostszy sposób na rozwiązanie tego problemu? Dzięki!

Answer 1

To dlatego

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

Należy dodać warunek, że kontrole wprowadzone wartości i wartość domyślną.

UPD: próbka klienta bocznej ckeck jQuery:

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

Answer 2

Również sprawdzić HintValue, biblioteka JavaScript, który wykonuje to: http://projects.functino.com/hintvalue/

Answer 3

nowszych wersji szyn należy użyć

text_field_tag ​​'search', nil,: placeholder => 'Wprowadź wyszukiwane hasło ...'

sprawdzić tutaj dla text_field_tag documentation