15 – Eventos del TECLADO en el LOGIN ( 👨💻 PHP y MYSQL 💻)

Duración: 7 min
Módulo: 👤 Módulo de Usuarios, Login y Control de Sesiones Lección 4 de 17

Descripción

Lección 15 – Eventos del TECLADO en el LOGIN ( 👨💻 PHP y MYSQL 💻)

En esta lección, refinarás la experiencia de usuario en tu Sistema de Parqueo implementando la funcionalidad de iniciar sesión presionando la tecla Enter en el formulario de login. 🚀 Tu instructor te guiará para que tu aplicación responda de manera más intuitiva, equiparándola a la usabilidad de sistemas profesionales.

En esta Lección Estratégica Aprenderás a:

  • Entender la Necesidad de la Interacción con el Teclado 💡
    • Reconocerás que, aunque tienes un botón "Ingresar", los usuarios están acostumbrados a presionar Enter después de introducir sus credenciales. Implementar esto mejorará significativamente la fluidez de tu login [00:33].
  • Asignar el Evento keypress al Campo de Contraseña 👂
    • En tu script de JavaScript, seleccionarás el campo de contraseña (#txt_password_user) y le asignarás el evento keypress [01:45]. Este evento se activará cada vez que el usuario presione una tecla mientras el foco esté en ese campo.
  • Detectar la Tecla Enter (Código 13) 🔑
    • Dentro de la función del evento keypress, utilizarás una condición if para verificar si el keyCode de la tecla presionada es 13 [04:05], que corresponde a la tecla Enter.
  • Refactorizar la Lógica de Login en una Función Reutilizable 🔄
    • Crearás una función de JavaScript llamada funcion_login() [05:03]. Todo el código que actualmente maneja la petición AJAX y la validación del login (que se ejecuta al hacer clic en "Ingresar") se moverá a esta nueva función.
    • Modificarás el evento click del botón "Ingresar" para que simplemente llame a funcion_login() [05:37].
    • De manera similar, dentro de la condición que detecta la tecla Enter, también llamarás a funcion_login() [05:49]. Esto asegura que tanto el clic del botón como la pulsación de Enter ejecuten la misma lógica de autenticación.
  • Verificar la Funcionalidad de Presionar Enter
    • Realizarás pruebas para confirmar que, al introducir las credenciales y presionar Enter, el sistema realiza la petición AJAX y muestra la respuesta (éxito o error) tal como lo hace al hacer clic en el botón "Ingresar" [06:20].

Al finalizar esta lección, tu Sistema de Parqueo contará con un login más intuitivo y amigable para el usuario, respondiendo tanto a clics como a la pulsación de la tecla Enter. ¡Has añadido una capa importante de usabilidad y profesionalismo a tu aplicación! 💪