teclado virtual

dante14 · #1 (**permalink**) 14/03/2009, 19:02

alguien sabe como hacer un teclado virtual para poner pasword ?

gracias

Panino5001 · #2 (**permalink**) 14/03/2009, 19:15

Fijate si te sirve, es un script de karlankas que está en las faqs (lo actualicé un poco para que funcione en navegadores modernos):

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>79.-Teclado</title>
<script>
//autor: karlankas -Actualizado por panino5001-
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){

texto=document.f.barra.value;
if(letra=="\b"){
numeroLetras=texto.length-1
texto=texto.substring(0,numeroLetras);
}
else{
if(!mayus){letra=letra.toLowerCase()}
texto=texto+letra;
}
document.f.barra.value=texto;
}
function mostrar(){
if (z==0){z=1;document.getElementById('botones').style.visibility="visible";pregunta.innerHTML="Ocultar teclado";}
else {z=0;document.getElementById('botones').style.visibility="hidden";pregunta.innerHTML="Mostrar teclado";}
 }
 function cambiomayus(aqui){
 if(aqui.checked){mayus=true}
 else{mayus=false}
 }
 </script>
   
</head>

<body style="font:normal 10px/15px verdana">
<form name="f">

<center>
<div style="width:300px">
<input type="Text" name="barra" style="width:300px;border:solid 1px black" >
<br>
<a id="pregunta" href=javascript:mostrar()>Mostrar teclado</a><br>

<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;' type='Button' value="+Tletras[a]+" onclick=anadir('"+Tletras[a]+"')>&nbsp;";
p=p+1;
if(p==10){p=0;letras=letras+"<br><br>";}
}
document.getElementById('botones').innerHTML=letras+"<input style='width:20px;' alt='Borrar' type='Button' value=&laquo; onClick=anadir('\b')><br><br><input style='width:205px;height:22px;' type='Button' value='espacio' onclick=anadir('&#160')><br><input type=checkbox name=mayusculas onclick='cambiomayus(this)' checked><font style='font:10px'>Mayusculas</font>";

</script>

</div>
</center>
</form>
</body>
</html>

dante14 · #3 (**permalink**) 14/03/2009, 19:32

si, esta perfecto amigo, una pregunta, como puedo darle estilos CSS al codigo ??
gracias x todo amigo

Panino5001 · #4 (**permalink**) 14/03/2009, 19:35

Como lo hacés habitualmente. Ejemplo:

Código PHP:

  <style> 
#botones input{color:red} 
</style>

dante14 · #5 (**permalink**) 14/03/2009, 19:38

xvr amigazo!!!
eres lo maximo

lalo0002 · #6 (**permalink**) 15/03/2009, 21:14

hola amigo, estube probando el codigo q posteaste y me tope con esta sorpresa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

con eso no da en firefox ?

y sin eso mi pagina cambia en algunas cosas

a q se debe eso ?

Panino5001 · #7 (**permalink**) 16/03/2009, 05:42

Como dije, es una adaptación de un script muy viejo de karlankas. Para usarlo con cualquier doctype basta reemplazar las ocurrencias de botones por document.getElementById('botones').
Ahí hice los reemplazos en el post anterior para que pueda usarse en modo compatible.

lalo0002 · #8 (**permalink**) 16/03/2009, 10:12

muy buena ayuda!!!

gracias nuevamente

Mirkala · #9 (**permalink**) 22/08/2009, 19:11

Hola a todos esta muy bueno el teclado virtual que crearon pero una pregun en el caso de un teclado virtual numerico en el cual los numeros cambien de posicion como seria ah ya saben como en el caso de acceso a una cuenta bancaria por ejemplo en java script si no fuera muxa molestia gracias de antemano por la ayuda bye ;)