Hace unos dias baje este codigo de un teclado en pantalla, le hice dos modificaciones basicas y creo que puede ser util para la comunidad
1.- Al cambiar de Mayusculas a Minusculas cambia las teclas en la pantalla para que el usuario vea exactamente lo que va a teclear.
2.- Le agregue a manera de ejemplo otro campo para que se pueda usuar el teclado dentro de una forma con n numero de campos y automaticamente asigne el resultado de lo seleccionado con el teclado al campo que tiene el foco.
Espero les sirva.
Gracias y saludos a toda la comunidad desde Guadalajara, Jalisco, Mexico.
<html>
<head>
<title>79.-Teclado</title>
<script>
//Script absurdo y original de KarlanKas para forosdelweb.com
texto="";
var Tletras=new Array ("Q","W","E","R","T","Y","U","I","O","P","A","S"," D","F","G","H","J","K","L","Ñ","Z","X","C","V","B" ,"N","M",",",".");
var z=0;
var mayus=true
function anadir(letra){
var cvar = 'forma.' + forma.campo.value + '.value';
texto = eval(cvar);
if(letra=="\b"){
numeroLetras=texto.length-1
texto=texto.substring(0,numeroLetras);
}
else{
if(!mayus){letra=letra.toLowerCase()}
texto=texto+letra;
}
var cvar = 'forma.' + forma.campo.value + '.value=texto';
eval(cvar);
}
function mostrar(){
if (z==0){z=1;botones.style.visibility="visible";preg unta.innerText="Ocultar teclado";}
else {z=0;botones.style.visibility="hidden";pregunta.in nerText="Mostrar teclado";}
}
function cambiomayus(aqui){
if(aqui.checked){mayus=true}
else{mayus=false}
if (!mayus)
{
for ( j=0; j <= 26; j++ ) {
var letra = Tletras[j].toLowerCase();
var cvar = 'formkey.' + Tletras[j] + '.value ="' + letra + '"';
eval(cvar);
}
} else
// formkey.Q.value = 'q';
for ( j=0; j <= 26; j++ ) {
var letra = Tletras[j];
var cvar = 'formkey.' + Tletras[j] + '.value ="' + letra + '"';
eval(cvar);
}
{
}
}
</script>
</head>
<body onload="javascript:mostrar()" style="font:normal 10px/15px verdana">
<center>
<div style="width:300px">
<?php echo "kjkjkj"; ?>
<form name="forma">
<input type="hidden" name="campo" value="barra">
<input onfocus="forma.campo.value='barra'" type="Text" name="barra" style="width:300px;border:solid 1px black" ><br>
<input onfocus="forma.campo.value='barra2'" type="Text" name="barra2" style="width:300px;border:solid 1px black" ><br>
<a id="pregunta" href=javascript:mostrar()>Mostrar teclado</a><br>
</form>
<br>
<br>
<br>
<br>
<br>
<div align=center id="botones" style="font:normal 8px/4px verdana;visibility:hidden;"></div>
<script>
var letras="";
var p=0;
for (a=0;a<Tletras.length;a++){
letras=letras+"<input style='width:20px;' name="+Tletras[a]+" type='Button' value="+Tletras[a]+" onclick=anadir('"+Tletras[a]+"')> ";
p=p+1;
if(p==10){p=0;letras=letras+"<br><br>";}
}
botones.innerHTML="<form name='formkey'>" +letras+"<input style='width:20px;' alt='Borrar' type='Button' value=« onClick=anadir('\b')><br><br><input style='width:205px;height:22px;' type='Button' value='espacio' onclick=anadir(' ')><br><input type=checkbox name=mayusculas onclick='cambiomayus(this)' checked><font style='font:10px'>Mayusculas</font></form>";
</script>
</div>
</center>
</body>
</html>
