logo

Palette - Make it Colorful🎨

Palette - Visual Page Builder, no design degree required.

Live Demo Download Palette

Défilement

jQuery et Drupal. Leçon 7. Champ de recherche avec jQuery, événements Focus et Blur

05/07/2025, by Ivan

Vous avez sûrement déjà vu un champ de recherche affichant le texte « Поиск » (« Recherche »), où ce mot disparaît dès que vous cliquez pour taper votre requête. Voici un snippet jQuery pour cela :

$('#search-block-form .form-text').val('Поиск');

$('#search-block-form .form-text').blur(function(){
     if(this.value==''){
       this.value='Поиск';
     }
});    
$('#search-block-form .form-text').focus(function(){
    if(this.value=='Поиск'){
      this.value='';
    }
});

Ce comportement est géré par deux gestionnaires d’événements : .blur() et .focus().

.blur() — gère l’événement de perte du focus (curseur texte) sur l’élément. Si le champ est vide lors de cet événement, on remet le texte « Поиск » dans le champ.

.focus() — gère l’événement de prise de focus sur l’élément. Si le champ contient le texte « Поиск », on le vide pour permettre la saisie.