Para aquellos de nosotros que viajamos a menudo, a menudo terminamos accediendo a nuestros correos electrónicos y otras cuentas web confidenciales en computadoras públicas. En tales circunstancias, estamos completamente a merced de los keyloggers y otros programas maliciosos que rastrean nuestras pulsaciones y registran nuestras contraseñas.
Sin embargo, muy pocos sitios web ofrecen a sus usuarios la opción de usar un teclado virtual para ingresar (como mínimo) sus contraseñas. Sí, algunos bancos lo hacen, pero teniendo en cuenta la cantidad de información personal que almacenamos en varias aplicaciones web en estos días, la seguridad de estas cuentas no es menos importante para nosotros. Este tutorial explicará cómo podemos implementar un simple teclado virtual con algo de ayuda de jQuery (bueno, vale, ¡muchas!).
Antes de comenzar, déjame mostrarte cómo se verá todo al final.
Configuración básica de HTML y CSS
Ok, vamos a empezar. Comenzamos con un formulario de inicio de sesión simple y antiguo con campos de nombre de usuario y contraseña y un botón de inicio de sesión. Agregamos un enlace que mostrará / ocultará el teclado virtual cuando se haga clic.
Nota: para fines de demostración, en realidad he usado un campo de texto normal en lugar de un campo de texto de tipo de contraseña.
A continuación, es hora de colocar el XHTML para el teclado en su lugar. Solo quería un enfoque muy simple y, por lo tanto, descarté generar las claves dinámicamente. Tengo solo las cuatro filas principales del teclado estándar (cada una incluida en un DIV), junto con sus equivalentes de turno. Esto significa un total de 8 filas, de las cuales en cualquier momento (dependiendo de si se presiona o no la tecla Mayús), cuatro de las filas serán visibles y las otras cuatro estarán ocultas.
Me he cuidado de representar personajes que tienen un significado especial en HTML, como? <? utilizando entidades.
El CSS
He mantenido el estilo CSS muy mínimo. Por supuesto, si quieres que tu teclado se vea como un dragón, ¡puedes seguir adelante y todo ese jazz! Establecemos la propiedad de visualización de div que encierra el teclado para que sea "ninguna"? inicialmente, ya que no queremos que aparezca hasta que el usuario lo active haciendo clic en el? Teclado? enlazar. Además, también escondemos el? Cambio? teclas, es decir, las teclas que se activan solo cuando el botón de cambio está abajo. He nombrado estas filas con un ID de div que termina? _Shift ?. Los traeremos de nuevo a la vista cuando el usuario presione la tecla de mayúsculas (veremos más adelante).
El resto del CSS involucra el formato básico para que las teclas se vean como están en un teclado QWERTY estándar.
jQuery
Vayamos ahora a la parte más importante: el JavaScript que controla el comportamiento del teclado. Utilizaremos dos extensiones jQuery: una para hacer que el teclado se pueda arrastrar y la otra para ayudar en la selección y manipulación del campo de contraseña. He hecho algunas adiciones al complemento original fieldSelection JQuery de Alex Brem para satisfacer nuestras necesidades adicionales. vkeyboard.js contiene nuestro código personalizado.
En vkeyboard.js, colocamos todo nuestro código dentro de la función de jQuery ready para asegurarnos de que el código se ejecute solo después de que el documento esté completamente cargado.
Déjame guiarte a través de la lógica subyacente detrás del código. Primero agregamos un? Onclick? controlador de eventos que hace que el teclado se active (es decir, se muestre si está oculto, se oculte si ya se muestra) cuando el usuario hace clic en el? Teclado? enlazar.
A continuación, hacemos que el teclado se pueda arrastrar, para que el usuario pueda arrastrarlo y mantenerlo en cualquier lugar de la pantalla, de manera que no obstruya el texto que se encuentra debajo. Hacemos esto llamando al draggable (), cortesía del complemento jQuery UI + draggable.
A continuación, debemos definir una función que alterne entre las filas predeterminadas del teclado y las filas que se activan cuando se pulsa la tecla "Mayúsculas". se presiona la tecla
Por último, definimos una función que se llama cada vez que se presiona alguna de las teclas del teclado.
Esta función comprueba si la tecla presionada es Retroceso. Si es así, entonces llama a la función replaceSelection desde el complemento fieldSelection con una cadena vacía como parámetro, para indicar que una operación de retroceso (que reemplaza el carácter anterior a la ubicación del cursor actual por una cadena vacía, es decir, que elimina el carácter anterior) realizado
Si el? Cambio? tecla había sido presionada, entonces la función establece el? Shifton? Esta variable es verdadera para indicar que se presionó la tecla de mayúsculas y llama a Shift (1).Sin embargo, si la tecla Mayús ya ha sido presionada, la función desactiva las filas de turno llamando a Shift (0).
Si se presionó alguna otra tecla, simplemente insertamos el carácter entre la posición actual del cursor. La opción replaceSelection () maneja el caso cuando el usuario ya ha seleccionado algunos caracteres. En ese caso, los caracteres seleccionados serían reemplazados por el carácter representado por la tecla presionada.
¿Y? ¡hemos terminado! Echa un vistazo a la demostración y descarga el código fuente completo aquí.
Como puede ver, la mayoría del trabajo duro real es manejado por los complementos de jQuery. Si está interesado en leer más sobre los desafíos relacionados con la selección de campos y el reemplazo con Javascript, debe consultar este artículo en Quirksmode.