jQuery: impostare il valore predefinito di un campo di ricerca

  • jQuery
  • Gabriele Romanato

Possiamo usare jQuery per impostare il valore predefinito di un campo di ricerca e modificarlo all'occorrenza. Vediamo come fare.

Useremo il seguente codice:


$('#s')
    .val('Cerca...')
    .css('color', '#ccc')
    .focus(function(){
        $(this).css('color', '#000');
        if ($(this).val() == 'Cerca...') {
            $(this).val('');
        }
    })
    .blur(function(){
        $(this).css('color', '#ccc');
        if ($(this).val() == '') {
            $(this).val('Cerca...');
        }
    });

Il codice esegue le seguenti operazioni:

  1. Imposta il valore del campo su "Cerca".
  2. Quando il campo riceve il focus, imposta il colore del testo sul nero.
  3. Se il valore è quello predefinito lo rimuove.
  4. Quando il campo perde il focus, imposta il colore del testo sul grigio.
  5. Se il valore è vuoto, reimposta il valore predefinito.
Torna su