Javascript - Simple teclado con javascript
Códigos Javascript
El codigo de ejemplo muestra un sencillo Teclado usando javascript y css.
Tutores.org
Mostrando Codigo - Javascript
CODIGO
# Codigo ofrecido por Tutores.org
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Teclado javascript</title>
- <script>
- function AsignaValor(Nombre,Valor){
- var Campo = document.getElementById(Nombre);
- if(Valor==""){
- Campo.value="";
- }else{
- if(Campo.value!=""){
- Campo.value = Campo.value + Valor;
- }else{
- Campo.value = Valor;
- }
- }
- }
- function marcador(Div,Nombre,Activar){
- var resultado="";
- var Numeros = new Array('1','2','3','4','5','6','7','8','9','0');
- var Letras = 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 x=Numeros.length;
- var a=Letras.length;
- for ( var i=0, len=x; i<len; ++i ){
- resultado +="<a class="teclas" onclick="AsignaValor('"+Nombre+"','"+Numeros[i]+"')">" + Numeros[i] + "</a>";
- }
- for ( var i=0, len=a; i<len; ++i ){
- resultado +="<a class="teclas" onclick="AsignaValor('"+Nombre+"','"+Letras[i]+"')">" + Letras[i] + "</a>";
- }
- resultado +="<a class="teclas limpiar" onclick="AsignaValor('"+Nombre+"','')">Borrar</a>";
- resultado +="<a class="teclas espacio" onclick="AsignaValor('"+Nombre+"',' ')">Espacio</a>";
- document.getElementById(Div).innerHTML=resultado;
- }
- </script>
- <style>
- .teclas{padding:3px;display:block;width:15px;cursor:pointer;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;position:relative;float:left;text-align:center;text-transform: uppercase;}
- .teclas:hover{background-color:#eeeeee;}
- #contenedor{width:220px;border-left:1px solid #cccccc;border-top:1px solid #cccccc;display:block;clear:both;height:94px;font-size:10px;margin:5px 0;}
- .limpiar{width:59px;}
- .espacio{width:213px;}
- .campotexto{text-transform: uppercase;width:213px;border:1px solid #cccccc;font-size:11px;padding:3px;;color:green;}
- </style>
- </head>
- <body onload="marcador('contenedor','campo_clave',1)">
- <div><input type="text" class="campotexto" name="clave" id="campo_clave" readonly /><div id="contenedor"></div></div>
- </body>
- </html>
ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Simple teclado con javascript" href="http://www.tutores.org/codigo/1845/" target="_blank">Simple teclado con javascript</a>
<!-- Final enlace Tutores.org -->
<a title="Tutores.org - Simple teclado con javascript" href="http://www.tutores.org/codigo/1845/" target="_blank">Simple teclado con javascript</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
Mirko
01-06-2012 02:18:47
2
5
hola amigo, muye bueno tu codigo, me ha servido de mucho, pero no me funciona la opcion "hover", se supone que debe cambiar al acercar el mouse, pero no he logrado que funcione, espero puedas ayudarme, te lo agradecere mucho.
Comentario usuario
ariel
23-01-2008 16:43:57
5
5
Excelente código, amigo.
te consulto, tengo que mezclarlo con otro javascript que hace unos cálculos en tiempo real y no funcinoan juntos.
me darías una mano?
te consulto, tengo que mezclarlo con otro javascript que hace unos cálculos en tiempo real y no funcinoan juntos.
me darías una mano?
INSERTAR COMENTARIO