LinuxParty
NUESTRO SITIO necesita la publicidad para costear hosting y el dominio. Por favor considera deshabilitar tu AdBlock en nuestro sitio. También puedes hacernos una donación entrando en linuxparty.es, en la columna de la derecha.
Ratio: 5 / 5
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 hay un espacio entre < y > 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></div><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>
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
Ahora vamos a llegar a la parte más importante - el código JavaScript que controla el comportamiento del teclado. Vamos a utilizar dos extensiones jQuery - uno para que el teclado, y la otra a la ayuda en la selección y manipulación de el campo de la contraseña. He hecho algunas adiciones al original plugin fieldSelection de jQuery por Alex Brem para adaptarse a nuestras necesidades adicionales. vkeyboard.js contiene nuestro código personalizado.
< 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.
< 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
- Thomas E. Kurtz, coinventor de BASIC, muere a los 96 años
- 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
Redes: |
 |
 |
 |
Suscribete / Newsletter
El Top de LinuxParty
- Cambiar la Hora y la Fecha al sistema Linux
- Cómo configurar la tarjeta de Red Inalámbrica ( WiFi ) en Linux
- Manual para hackear una red wifi
- Cómo configurar el Modem USB o Tarjeta GPRS / 3G para Linux.
- 20 Comandos Netstat para Administradores de Redes Linux
- 29 Prácticos ejemplos de Nmap para Administradores de Sistemas / Redes
- Tutorial de C/C++, programar paso a paso, para Linux, Windows y Mac
- Exportar Bases de Datos de Access (MDB) a MySQL
- ERROR 1045: Access denied for user: 'root@localhost' (Using password: YES)
- 20 ejemplos iptables para administradores de sistemas Linux
- Introducción a los comandos SNMP, snmpwalk, snmpget, snmptranslate...
- Cómo Montar tu Propio Wiki
- Cómo bloquear fotos e imágenes porno con SafeSquid, servidor proxy
- Instalar Microsoft Office en Linux (con Wine)
- Cómo Crear una Base de Datos MySQL e inicializar los privilegios.
- Programar y depurar en un IDE para PHP con Eclipse, plugins PDT, xdebug y Remote debug
- 40 cosas que probablemente no sepas sobre Linux
- Sexo, Violencia, y Tensión en los Juegos.
- Los 27 mejores IDEs para programación C/C++ o editores de código de Linux
- Renombrar multiples archivos masivamente en Linux (quitar espacios, cambiar mayúsculas) a la vez en Linux
Donar a LinuxParty
Probablemente te niegues, pero.. ¿Podrías ayudarnos con una donación?
Tutorial de Linux
Formulario de acceso
Últimos comentarios
- Buscar y reemplazar en Vim (1)
- En Italia ha caido un meteorito de más de 45.000 millones de años (2)
- Los mejores juegos de GNU/Linux – Una larga lista (1)
- Cómo configurar DRBD para replicar el almacenamiento en dos servidores CentOS 7 y 8 (1)
- Aprender a programar en Basic con QB64, La versión QuickBASIC para Linux, MacOS y Windows es la opción que las escuelas deberían escoger (2)
- Por qué Linux no triunfa en el Escritorio. (1)
- Configuración del servidor DNS en Linux (3)
- Los 27 mejores IDEs para programación C/C++ o editores de código de Linux (1)
- Q4OS hace que Linux sea fácil para todos (1)
- Cómo configurar un servidor de correo con Postfix y Dovecot para diferentes necesidades (9)
Comentarios
Cito a gustavo:
Es tan fácil, como coger tu el código y modificarlo a tu gusto, hay que esforzarse un poquillo para obtener el plazer de conseguirlo.