jQuery Ajouter un texte par défaut pour rechercher la zone d'entrée

Améliorez votre boîte de recherche avec jQuery: un guide simple mais efficace! Ce didacticiel montre comment ajouter du texte par défaut à votre zone de recherche, ce qui le rend plus convivial. La solution garantit que le texte par défaut disparaît sur le clic, réapparaît lorsque la boîte est vide et fournit des commentaires visuels sur le survol.

Voir la démo en direct

voici le code javascript:

$('#search').blur(function(){
    if (this.value == '') {
        this.value = 'Search BLOGOOLA';
    }
});

Ce code jQuery utilise l'événement blur pour vérifier si la zone de recherche est vide après l'interaction de l'utilisateur. Si vide, il définit le texte par défaut.

La structure HTML (non illustrée en détail) doit simplement contenir un formulaire avec un champ de saisie ayant l'ID "Recherche".

Le style CSS ci-dessous fournit les améliorations visuelles:

#searchform { opacity:0.8 }
#searchform:hover { opacity:1.0 }
#searchform fieldset { border:0px; padding:0px; margin:0px; }
#searchform input { width:190px; height:16px; margin:0px 0px 0px 10px; padding:2px 5px 2px 5px; border-width:1px 1px 1px 1px; border-style:solid solid ridge solid; font-family:Arial, Helvetica, sans-serif; font-size:small; }
#searchform button{ float:right; width:30px; height:22px;  margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-width:1px 1px 0px 1px; border-style:solid solid ridge solid; background-repeat:no-repeat; background-image:url('../images/search.png'); }
#searchform button:hover { cursor:pointer; background-color:#E2E2E2; }

Ce CSS contrôle l'opacité sur le plan, supprime le style de formulaire par défaut et définit les dimensions et les styles pour le champ de saisie et le bouton de recherche.

Questions fréquemment posées (FAQ) sur l'ajout de texte par défaut pour rechercher l'entrée

Cette section aborde les questions courantes concernant l'ajout de texte par défaut à un champ de saisie de recherche, couvrant les approches HTML et CSS. La section FAQ d'origine est conservée, mais reformulée pour plus de clarté et de concision. Des exemples de code spécifiques sont inclus lorsqu'ils sont bénéfiques.

Attribut HTML Planholder

Utilisez l'attribut HTML placeholder pour un moyen simple d'ajouter du texte par défaut. Par exemple: <input type="search" placeholder="Enter search term...">. Le texte du placement disparaîtra à mesure que l'utilisateur type.

Styling Prenolholder Text avec CSS

Contrôlez la couleur du texte de l'espace réservé à l'aide de CSS:

input::placeholder {
  color: red;
}

Cet exemple définit le texte d'espace réservé en rouge. N'oubliez pas que la prise en charge du navigateur pour ::placeholder varie; Vous avez peut-être besoin de préfixes de fournisseurs pour les navigateurs plus âgés.

javascript pour le texte par défaut

Bien que l'attribut placeholder soit souvent suffisant, vous pouvez utiliser JavaScript pour gérer dynamiquement le texte par défaut. L'exemple jQuery fourni ci-dessus est une telle méthode.

ajoutant une icône

Utilisez les propriétés de CSS background-image et background-position pour ajouter une icône dans la zone de recherche.

Expansion de la recherche de recherche sur Focus

Utilisez le :focus pseudo-classe dans CSS pour agrandir la zone de recherche lorsqu'elle gagne la mise au point:

input[type="search"]:focus {
  width: 200px;
}

Effacer le style du bouton

Le style du bouton Clear intégré nécessite un CSS spécifique au navigateur en raison de pseudo-éléments différents. Pour les navigateurs WebKit (Chrome, Safari), vous pouvez utiliser:

input[type="search"]::-webkit-search-clear-button {
  color: red;
}

Soumission de formulaire sur Entrée Key

Assurez-vous que la zone de recherche est dans un élément <form></form> pour soumettre automatiquement le formulaire lorsque la touche Entrée est enfoncée.

Autofocus à la page Charge

Utilisez l'attribut autofocus sur l'élément <input> pour concentrer automatiquement la zone de recherche lorsque la page se charge: <input type="search" autofocus>.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!