Use el diseño Bootstrap para agregar un icono de borde de un solo clic en el cuadro de entrada de entrada, como el icono de borde de un solo clic en el cuadro de entrada de nombre de inicio de sesión y el pequeño icono de ojo que muestra la contraseña en el cuadro de entrada de contraseña, como se muestra en la figura a continuación:
Sin embargo, al colocar los iconos en el cuadro de entrada de entrada, estos pequeños iconos no pueden obtener eventos de clic;
Entonces, la pregunta es, ¿cómo pueden estos pequeños iconos obtener eventos de clic?
No lo sé, pero puedo usar una forma indirecta de implementar esta función indirectamente .
*** El punto clave es:
Solución: agregue un elemento invisible a la posición del pequeño icono, y el tamaño del elemento solo cubre el pequeño icono, pero no hay color y borde de fondo; Es equivalente a cubrir el pequeño icono con una colcha transparente;
Copie el código de la siguiente manera: <Div>
<span> <i> </i> </span>
<input type = "text" placeHolder = "cuenta/número móvil/correo electrónico" id = "nombre de usuario">
<span style = "Display: Inline-Block;"> </span> <-elemento pequeño de iconos->
<span style = "Display: inline-block; borde: 1px rojo sólido; ancho: 30px; altura: 30px; posición: absoluto; derecha: 2px; z-índice: 100; cursor: puntero;"> </span> <-elementos sobre el icono pequeño->>
</div>
Agregue eventos a este elemento que se superpone en el pequeño icono. La función del pequeño icono es solo para mostrar y esconderse según sea necesario;
Esto se realiza indirectamente. ¿El efecto de clic del pequeño icono es una gran solución? Gracias por su lectura, y espero que pueda ayudarlo a resolver el problema sin problemas.
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico