Rails text_field valore predefinito scompare al clic (e ombreggiato)

Question

Questi campi di testo sono fantastici e sono comuni su siti Web 2.0 come Facebook.

In sostanza anziché etichettare il campo di testo, è possibile risparmiare spazio inserendo l'etichetta all'interno del campo di testo. In genere il testo viene leggermente sfumato a colori e, quando l'utente fa clic nel campo di testo, il valore predefinito scompare e il colore passa al nero o al colore normale in modo che l'utente possa inserire il testo.

Finora questo è il modo ho la loro creazione:

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

funziona questo fondo. Ma un problema che ho notato è che se si digita qualcosa nel campo e si invia un modulo che non riesce, il modulo verrà ricaricato con ciò che è stato digitato nel campo (come dovrebbe), ma il testo non viene visualizzato correttamente. Ciò si verifica anche se si fa clic sul browser. Visualizza il testo immesso (non il valore predefinito) ma il colore del testo non è selezionabile.

Esiste un metodo più semplice per risolvere questo problema? Grazie!

Answer 1

Questo perché

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

Si dovrebbe aggiungere condizioni, che i controlli il valore e il valore predefinito entrarono.

UPD: campione di lato client ckeck jquery:

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

Answer 2

Verificate anche HintValue, una libreria JavaScript che fa questo: http://projects.functino.com/hintvalue/

Answer 3

Per la versione più recente di rotaie si dovrebbe usare

text_field_tag ​​'search', nil,: placeholder => 'Inserisci il termine di ricerca ...'

assegno qui per i text_field_tag documentation