jQuery en Drupal. Les 7. Zoekveld met jQuery, de gebeurtenissen Focus en Blur

Je hebt vast wel eens een zoekveld gezien met het woord “zoeken” erin, dat verdwijnt zodra je erop klikt, waarna je je eigen zoekopdracht kunt invoeren. Hieronder staat een jQuery-snippet die dit gedrag realiseert:

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

Hiervoor worden twee event-handlers gebruikt: .blur() en .focus().

.blur() — wordt geactiveerd wanneer het element de focus verliest (de tekstcursor verdwijnt uit het veld). Bij dit event vullen we het veld opnieuw met “Zoeken” als het leeg is.

.focus() — wordt geactiveerd wanneer het element de focus krijgt. Bij dit event wissen we de tekst als het veld “Zoeken” bevat, zodat de gebruiker kan beginnen met typen.