Utilisez la disposition de bootstrap pour ajouter une icône Effacer en un clic dans la zone d'entrée d'entrée, telle que l'icône Effacer en un clic dans la zone d'entrée de nom de connexion et l'icône de petite œil qui affiche le mot de passe dans la zone d'entrée de mot de passe, comme indiqué sur la figure ci-dessous:
Cependant, lors de la mise en place des icônes dans la zone d'entrée d'entrée, ces petites icônes ne peuvent pas obtenir des événements de clic;
La question est donc de savoir comment ces petites icônes peuvent-elles obtenir des événements de clic?
Je ne sais pas, mais je peux utiliser un moyen de rond-point pour implémenter cette fonction indirectement .
*** Le point clé est:
Solution: Ajoutez un élément invisible à la position de la petite icône, et la taille de l'élément couvre simplement la petite icône, mais il n'y a pas de couleur de fond et de bordure; Il équivaut à couvrir la petite icône avec une courtepointe transparente;
Copiez le code comme suit: <div>
<span> <i> </i> </span>
<input type = "text" placeholder = "Account / Mobile Number / Email" id = "username">
<span style = "Display: en ligne de bloc;"> </span> <- petit élément icône ->
<Span Style = "Affichage: Block en ligne; Border: 1px Red solide; Largeur: 30px; hauteur: 30px; Position: Absolute; Droite: 2px; Z-Index: 100; Cursor: Pointer;"> </span> <- Éléments sur la petite icon ->
</div>
Ajoutez des événements à cet élément superposé sur la petite icône. La fonction de la petite icône est uniquement pour afficher et masquer au besoin;
Ceci est indirectement réalisé. L'effet de clic de la petite icône est-il une excellente solution? Merci pour votre lecture, et j'espère que cela pourra vous aider à résoudre le problème en douceur.
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap