jQuery e Drupal. Lezione 7. Campo di ricerca in jQuery, eventi Focus e Blur

Avrai sicuramente visto più di una volta un campo di ricerca con la parola “ricerca” al suo interno, che scompare quando si clicca sul campo per poter inserire la propria query di ricerca. Di seguito trovi uno snippet jQuery che realizza questa funzionalità:

$('#search-block-form .form-text').val('Ricerca');
 
$('#search-block-form .form-text').blur(function(){
     if(this.value==''){
       this.value='Ricerca';
     }
  });    
  $('#search-block-form .form-text').focus(function(){
    if(this.value=='Ricerca'){
      this.value='';
    }
  });

Per ottenere questo effetto vengono utilizzati due gestori di eventi: .blur() e .focus().

.blur() — gestisce l’evento di perdita del fuoco (quando il cursore lascia il campo di testo). Con questo evento, se il campo è vuoto, inseriamo nuovamente la parola “Ricerca”.

.focus() — gestisce l’evento di acquisizione del fuoco sul campo. Con questo evento, se nel campo c’è la parola “Ricerca”, la cancelliamo lasciando il campo vuoto.