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;
}

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.