Texte de la boîte de recherche – Afficher la masque de la fonctionnalité

Sur le site de Chris Coyer, il utilise une belle petite case de recherche. Je suis curieux de savoir comment vous obtenez le texte dans la boîte de recherche pour disparaître et réapparaître lorsque vous cliquez sur la boîte.

Grâce à une personne utile sur ce forum, j'utilise les éléments suivants pour que le texte disparaisse lorsque je clique sur la case:

<input type="text" value="Search" onfocus="if (this.value=='Search') this.value='';"/> 

En outre, dans Safari, il y a une bordure désagréable autour du champ de saisie lorsque je clique à l'intérieur. Quel est le code pour se débarrasser de ça?

Merci!

Je ne crois pas que vous pouvez supprimer la bordure dans Safari, bien que ouvert aux corrections.

Pour que le texte apparaisse à nouveau lorsque vous cliquez sur le champ de recherche, vous pouvez l'utiliser:

 <input onblur="if (this.value == '') this.value ='Search';" /> 

Pour réinitialiser le texte de recherche, ajoutez un lien:

 onblur="if (this.value=='') this.value='Search';" 

Donc, votre boîte de saisie devient:

 <input type="text" value="Search" onfocus="if (this.value=='Search') this.value='';" onblur="if (this.value=='') this.value='Search';"/> 

Aussi, pour la bordure Safari, ajoutez ceci dans votre css:

 input[type=text]:focus, input[type=password]:focus { outline: 0 none; } 

Vous pouvez vous débarrasser de la duplication de la valeur statique si vous utilisez la propriété defaultValue

Comparez ceci

 <input type="text" value="Search" onblur="if ('' == this.value) this.value = 'Search';" onfocus="if ('Search' == this.value) this.value='';"/> 

Qui a trois instances de la chaîne statte "Rechercher", à ceci

 <input type="text" value="Search" onblur="if ('' == this.value) this.value = this.defaultValue;" onfocus="if (this.defaultValue == this.value) this.value='';"/> 

Qui n'en a qu'un.

Mais si vous voulez vraiment passer le «prochain niveau», vous pouvez mettre en œuvre quelque chose comme les étiquettes presque canoniques. Le code est vraiment ancien maintenant, après avoir été rédigé en 2002 (je pense), mais le concept est sain et son concept de base a depuis été utilisé avec des cadres modernes .