LinuxParty
Para aquellos de nosotros que viajan con frecuencia, a menudo terminan accediendo a los mensajes de correo electrónico y otros datos confidenciales web, en ordenadores con cuentas públicas. En tales circunstancias, estamos completamente a merced de los keyloggers y otros programas maliciosos que hacen un seguimiento de nuestras pulsaciones de teclado y contraseñas.
Sin embargo, son muy pocos los sitios web que ofrecen a sus usuarios la opción de utilizar un teclado virtual para introducir (al menos) sus contraseñas. Sí, unos pocos bancos suelen hacerlo, pero teniendo en cuenta la cantidad de información personal que almacenan en diversas aplicaciones web en estos días, la seguridad de estas cuentas son de menor importancia para nosotros. Este tutorial se explica cómo podemos aplicar un simple teclado virtual con alguna (bien, bien, bastante!) ayuda de jQuery.
Antes de comenzar, permítanme mostrar la manera en que todos esperamos verlo al final.
HTML Básico e instalación del CSS.
Ok, vamos a empezar. Empezamos con un típico antiguo formulario de acceso con nombre de usuario y contraseña campos y un botón de acceso. Añadimos un vínculo para mostrar / ocultar el teclado virtual cuando se hace clic.
Tenemos que explicar que intencionadamente puede que no hubiera un espacio entre < y > (en los ejemplo) sólo para poder utilizarlo en el artículo, debería de quitarlo si va a hacer un "copy & paste", aunque le recomiendo que no se esfuerze y lea el artículo tranquilo, ya que al final del mismo podrá descargarse el código completo (y funcional).
<h3>Login form</h3>
<form action="" method="post" id="loginform">
<label for="username" >Username:</label>
<input type="text" name="username" id="username" />
<label for="pwd" >Password:< /label>
<input type="text" name="pwd" id="pwd"/ >
<a href="#" id="showkeyboard" title="Type in your password using a virtual keyboard." >Keyboard</a> <br />
<input type="submit" name="Submit" id="submit_butt" value="Submit" /> </form>
A continuación, es el momento de poner el XHTML en su lugar para su teclado. Sólo quería tener un enfoque muy sencillo y, por tanto, descartar la generación de las claves dinámicamente. Las cuatro principales líneas de la norma teclado (cada uno encerrado en un DIV), junto con sus equivalentes de cambio. Así que eso significa, un total de 8 filas, de los cuales en cualquier momento (dependiendo de si se pulsa o no la tecla Shift), cuatro de las filas serán visibles, y los otros cuatro ocultos.
<div id="keyboard" >
<div id="row0" >
<input name="accent" type="button" value="`" />
<input name="1" type="button" value="1" />
<input name="2" type="button" value="2" />
<input name="3" type="button" value="3" />
<input name="4" type="button" value="4" />
<input name="5" type="button" value="5" />
<input name="6" type="button" value="6" />
<input name="7" type="button" value="7" />
<input name="8" type="button" value="8" />
<input name="9" type="button" value="9" />
<input name="0" type="button" value="0" />
<input name=" – " type="button" value=" – " />
<input name="=" type="button" value="=" />
<input name="backspace" type="button" value="Backspace" />
</div >
<div id="row0_shift">
<input name="tilde" type="button" value="~" />
<input name="exc" type="button" value="!" />
<input name="at" type="button" value="@" />
<input name="hash" type="button" value="#" />
<input name="dollar" type="button" value="$" />
<input name="percent" type="button" value="%" />
<input name="caret" type="button" value="^" / >
<input name="ampersand" type="button" value="&" />
<input name="asterik" type="button" value="*" />
<input name="openbracket" type="button" value="(" />
<input name="closebracket" type="button" value=")" />
<input name="underscore" type="button" value="_" />
<input name="plus" type="button" value="+" />
<input name="backspace" type="button" value="Backspace" />
</div>
<div id="row1">
<input name="q" type="button" value="q" />
<input name="w" type="button" value="w" />
<input name="e" type="button" value="e" />
<input name="r" type="button" value="r" />
<input name="t" type="button" value="t" />
<input name="y" type="button" value="y" />
<input name="u" type="button" value="u" />
<input name="i" type="button" value="i" />
<input name="o" type="button" value="o" />
<input name="p" type="button" value="p" />
<input name="[" type="button" value="[" />
<input name="]" type="button" value="]" />
<input name="" type="button" value="" />
</div>
<div id="row1_shift">
<input name="Q" type="button" value="Q" />
<input name="W" type="button" value="W" />
<input name="E" type="button" value="E" />
<input name="R" type="button" value="R" />
<input name="T" type="button" value="T" />
<input name="Y" type="button" value="Y" />
<input name="U" type="button" value="U" />
<input name="I" type="button" value="I" />
<input name="O" type="button" value="O" />
<input name="P" type="button" value="P" />
<input name="{" type="button" value="{" />
<input name="}" type="button" value="}" />
<input name="|" type="button" value="|" />
</div>
<div id="row2" >
<input name="a" type="button" value="a" />
<input name="s" type="button" value="s" />
<input name="d" type="button" value="d" />
<input name="f" type="button" value="f" />
<input name="g" type="button" value="g" />
<input name="h" type="button" value="h" />
<input name="j" type="button" value="j" />
<input name="k" type="button" value="k" />
<input name="l" type="button" value="l" />
<input name=";" type="button" value=";" />
<input name="’" type="button" value="’" />
</div >
<div id="row2_shift" >
<input name="a" type="button" value="A" />
<input name="s" type="button" value="S" />
<input name="d" type="button" value="D" />
<input name="f" type="button" value="F" />
<input name="g" type="button" value="G" />
<input name="h" type="button" value="H" />
<input name="j" type="button" value="J" />
<input name="k" type="button" value="K" />
<input name="l" type="button" value="L" />
<input name=";" type="button" value=":" />
<input name="’" type="button" value=’"’ />
</div >
<div id="row3">
<input name="Shift" type="button" value="Shift" id="shift" />
<input name="z" type="button" value="z" />
<input name="x" type="button" value="x" />
<input name="c" type="button" value="c" />
<input name="v" type="button" value="v" />
<input name="b" type="button" value="b" />
<input name="n" type="button" value="n" />
<input name="m" type="button" value="m" />
<input name="," type="button" value="," />
<input name="." type="button" value="." />
<input name="/" type="button" value="/" />
</div >
<div id="row3_shift" >
<input name="Shift" type="button" value="Shift" id="shifton" />
<input name="Z" type="button" value="Z" />
<input name="X" type="button" value="X" />
<input name="C" type="button" value="C" />
<input name="V" type="button" value="V" />
<input name="B" type="button" value="B" />
<input name="N" type="button" value="N" />
<input name="M" type="button" value="M" />
<input name="lt" type="button" value="< " />
<input name="gt" type="button" value=" > " />
<input name="?" type="button" value="?" />
</div>
<div id="spacebar">
<input name="spacebar" type="button" value=" " />
</div>
</div>
CSS
He tomado el cuidado de representar los caracteres que tienen un significado especial en HTML, utilizando entidades "<".
He mantenido un mínimo estilo CSS. Por supuesto, si usted desea que su teclado se parezca a un dragón, puede seguir adelante y "viva el jazz!". Hemos establecido la propiedad div adjuntaba del teclado para ser "ninguno" inicialmente, ya que no queremos que se presenta hasta que el usuario pulse un clic en el "teclado". Además, también ocultamos la tecla "shift", es decir, las teclas que se activan sólo cuando el botón de cambio este pulsado. He nombrado estas filas con una ID div terminando en "_shift". Dando vuelta atrás cuando el usuario pulsa la tecla de mayúsculas (veremos más adelante).
El resto del CSS implica un formato básico para que las teclas parezcan que están en un teclado estándar QWERTY.
#keyboard {
position: absolute;
display: none;
border: 1px solid #ccc;
width: 560px;
padding: 10px;
cursor: move;
}
#spacebar input {
width: 180px;
margin: 0 auto;
margin-left: 150px;
}
#shift, #shifton {
width: 70px;
text-align: left;
}
#row0_shift, #row1_shift, #row2_shift, #row3_shift {
display: none;
}
#row0, #row0_shift {
padding-left: 20px;
}
#row1, #row1_shift {
padding-left: 60px;
}
#row2, #row2_shift {
padding-left: 70px;
}
#shifton {
border-left: 3px solid #000;
border-top: 3px solid #000;
}
jQuery
< script type="text/javascript" src="/jquery-1.2.6.min.js" > < /script >
< script type="text/javascript" src="/jquery-ui-personalized-1.5.2.min.js" > < /script >
< script type="text/javascript" src="/jquery-fieldselection.js" > < /script >
< script type="text/javascript" src="/vkeyboard.js" > < /script >
En vkeyboard.js, ponemos nuestro código jQuery en función de la lista para asegurarse de que el código se ejecuta sólo después de que el documento está completamente cargado.
$(document).ready(function() { // all our code goes here });
Permítanme que caminar a través de la lógica del código. En primer lugar, añadir un evento "onclick" hace que el teclado se active o desactive (es decir, mostrar si está oculto, ocultar si ya se ha mostrado) cuando el usuario hace clic en el "teclado".
$("#showkeyboard").click(function(e) {
var height = $(’#keyboard’).height();
var width = $(’#keyboard’).width();
leftVal=e.pageX-40+"px";
topVal=e.pageY+20+"px";
$(’#keyboard’).css({left:leftVal,top:topVal}).toggle();
});
A continuación, hacemos el teclado funcional, de modo que el usuario puede pulsar y mantener en cualquier parte de la pantalla tal sin que ello impida que aparezca el. Hacemos esto llamando a la funcion draggable(), cortesía de la jQuery UI + draggable plugin.
$("#keyboard").draggable();
Tenemos que definir una próxima función que alterna entre las filas por defecto en el teclado y las filas que se activan cuando la tecla "Mayúsculas" se presiona.
function onShift(e) {
var i;
if(e==1) {
for(i=0;i<4;i++) {
var rowid = "#row" + i;
$(rowid).hide();
$(rowid+"_shift").show();
}
}
else {
for(i=0;i<4;i++) {
var rowid = "#row" + i;
$(rowid).show();
$(rowid+"_shift").hide();
}
}
}
Por último, definir una función que llama siempre para saber si se pulsa cualquier tecla en el teclado.
Esta función comprueba si se pulsa la tecla Retroceso. Si es así, entonces se llama a la función replaceSelection de la fieldSelection plugin, con una cadena vacía como un parámetro, para indicar que una operación de retroceso (que sustituye al anterior carácter de la posición actual del cursor por una cadena vacía - es decir, la supresión de la anterior caracteres)
Si la tecla "Mayúsculas" ha sido presionado, entonces la función establece el variable "shifton" a verdad "True" para indicar que el cambio de clave ha sido presionado y llama a onShift(1). Sin embargo, si la tecla ya ha sido presionado, la función se desactiva y el cambio hace una llamada a onShift(0).
Si alguna otra clave ha sido presionado, entonces simplemente insertará en el carácter entre la posición actual del cursor. El replaceSelection() maneja el caso de que algunos caracteres ya han sido seleccionados por el usuario. En ese caso, los caracteres seleccionados se sustituyen por el carácter que está representado por la tecla presionada.
$("#keyboard input").bind("click", function(e) {
if( $(this).val() 'Backspace' ) {
$('#pwd').replaceSelection("", true);
}
else if( $(this).val() "Shift" ) {
if(shifton false) {
onShift(1);
shifton = true;
}
else {
onShift(0);
shifton = false;
}
}
else {
$('#pwd').replaceSelection($(this).val(), true);
if(shifton true) {
onShift(0);
shifton = false;
}
}
})
... Y ya lo tienes hecho! Echa un vistazo a la demo y descargar el código fuente completo aquí.
Como puede ver, la mayoría de la ardua labor está a cargo de los plugins de jQuery. Si usted está interesado en leer más sobre los problemas relacionados con campo de selección y reemplazo utilizando Javascript, usted debe ver este artículo en Quirksmode.
-
Programación
- Profesor de informática del MIT prueba el impacto de la IA en la formación de programadores
- Lanzamiento del IDE de código abierto Qt Creator 14 con soporte para complementos basados en Lua
- Plantillas para Joomla - Episodio 1: Plantillas, marcos y clubes o no...
- Este es el mejor libro que he visto para aprender a programar en Python en castellano desde cero, gratis y online
- ¿Deberían los niños seguir aprendiendo a programar en la era de la IA?
- La 'obsolescencia' de VBScript confirmada por Microsoft y su eventual eliminación de Windows
- El Gran Debate: ¿Deberían los Modelos de Inteligencia Artificial Ser de Código Abierto?
- El lenguaje de programación BASIC cumple 60 años
- El CEO de Nvidia dice que los niños no deberían aprender a programar
- 40 años de Turbo Pascal: recuerdos del dinosaurio codificador que revolucionó los IDE
- Los lenguajes de programación más populares y dónde aprenderlos.
- Top 5 de los principales lenguajes de programación para desarrollar aplicaciones de escritorio Linux
- Qt Creator 12 lanzado con complementos de grabación de pantalla y Explorador de compiladores
- 10 sitios web para practicar problemas de programación
- Rust en Linux: madurando con el soporte de Cisco, Samsung y Canonical
Comentarios
la intencion es buena, pero es mas sopeschoso que un keyloger
Sospechoso, será cuando el código no es visible, como las empresas que hacen software privativo, pero ¿con código abierto?
Yo creo, que es bastante claro, que es más seguro.
Si crees que es sospoechoso revisa el codigo fuente y veras si lo es o no, si no tienes conocimientos de programación pagale a alguien para que lo haga, pero lances cosas solo por decir algo, si no sabes no comentes.
Excelente aporte, felicitaciones por el codigo, justamente esto se utiliza para dar mayor seguridad en el ingreso de datos. Salu2.