Js crée l'effet de disparition du texte par défaut lorsque vous cliquez sur la zone de saisie_Effets spéciaux de texte

Afin d'améliorer l'expérience utilisateur et la facilité d'utilisation, certains concepteurs optimiseront les éléments que les utilisateurs utilisent fréquemment sur les pages Web, tels que les zones de saisie. Comment les zones de saisie générales sont-elles optimisées ? Du point de vue de l'expérience utilisateur, simplifier les étapes utilisateur et les rendre plus pratiques pour les utilisateurs améliore la convivialité. Par exemple, changer la couleur de la zone de saisie lorsque la souris survole la zone de saisie, en sélectionnant automatiquement le texte par défaut dans la zone de saisie. , ou en cliquant pour entrer Effacer automatiquement le contenu par défaut à l'ouverture de la boîte, etc. Cet effet semble compliqué, mais il est en réalité très simple à réaliser. Il suffit d’un court morceau de code JavaScript pour le résoudre. Ce qui suit présente les codes de plusieurs effets :

1. Cliquez sur la zone de saisie pour sélectionner le code HTML du contenu :

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" /> 
</form>

2. Changez la couleur de la bordure ou la couleur de l'arrière-plan lorsque la souris survole la zone de saisie

Il existe deux méthodes pour cet effet : la première méthode consiste à utiliser le pseudo-élément en CSS : focus ; la deuxième méthode consiste toujours à utiliser un petit morceau de javascript ; le code html de la première méthode est le même que dans l'exemple ci-dessus, sauf que le paragraphe suivant est ajouté au CSS :
input:hover { border:1px solid #F00 >
Lorsque la souris survole la zone de saisie, la bordure de la zone de saisie devient rouge. Cependant, cette méthode n'est valide que dans le navigateur Firefox et IE7 ou supérieur ne la prend pas en charge, elle présente donc certaines limitations. Le code de la deuxième méthode est essentiellement le même que celui de l'exemple ci-dessus, sauf qu'une section de code de survol de la souris est ajoutée à la fin :

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()"onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" /> 
</form>

En utilisant ce code, la plupart des navigateurs peuvent le prendre en charge.
3. Cliquez sur la zone de saisie et le texte par défaut disparaîtra
Il existe également un effet selon lequel lorsque la souris clique sur la zone de saisie, le texte par défaut d'origine disparaît. Si vous saisissez un nouveau contenu puis éloignez la souris, le nouveau contenu de la zone de saisie reste inchangé ; si vous n'entrez pas de nouveau contenu, la souris quitte la zone de saisie et le texte par défaut est restauré. Cet effet peut être obtenu en ajoutant simplement une courte section de javascript :

<form id="form1" name="form1" method="post" action="">
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" onFocus="if (value =='Dreamweaver'){value =''}" onBlur="if (value ==''){value='Dreamweaver'}"/> 
</form>

Nous adopterons soigneusement votre question. suggestions ; nous écouterons attentivement vos critiques ; veuillez décrire en détail vos suggestions ou les problèmes rencontrés.

Les trois effets ci-dessus sont des applications javascript relativement simples.