¿Quieres darle más interactividad a tu página web? Hoy te mostraré cómo hacer que el texto "mostrar contraseña" funcione y que el texto de los inputs quede arriba cuando hay algo escrito. ¡Vamos a empezar!
HTML:
Añadimos la etiqueta script dentro del head.
A todos los inputs les añadimos la clase input.
Encerramos los inputs tipo password en un contenedor y les añadimos IDs a estos y a sus etiquetas p.
JavaScript:
Creamos un evento para cuando todos los elementos carguen.
Seleccionamos los inputs, los inputs tipo password y las etiquetas para mostrar la contraseña.
Usamos forEach para añadir o quitar una clase nueva cuando haya texto en los inputs.
Agregamos un evento para mostrar la contraseña al hacer clic.
CSS:
A la clase input con texto le ponemos los mismos valores que cuando los inputs tienen focus.
Al contenedor de contraseña le damos position: relative y a "mostrar contraseña" position: absolute y ajustamos la posición.
Cambiamos el position de los labels a relative.
Para la versión móvil, ajustamos la posición de "mostrar contraseña".
Con estos pasos, lograrás una página web más interactiva y amigable para el usuario. ¡No te lo pierdas!
Sigue mis redes sociales para más contenido exclusivo:
📸 Instagram: [@srspess]([ Ссылка ])
📘 Facebook: [@srspes]([ Ссылка ])
🎵 TikTok: [@srspes]([ Ссылка ])
¡No olvides suscribirte y activar la campana de notificaciones para no perderte ningún video nuevo!
#desarrolloweb #javascript #css #interactividadweb #mostrarcontraseña #inputfield #webdesign #responsivedesign #programación #clasesenvivo
![](https://s2.save4k.ru/pic/AABLYmwbLB4/maxresdefault.jpg)