Publicentral.com - alta en buscadores, registro buscadores, promocionaPromocion en buscadores y negocios online
Mostrando Codigo - Javascript
Code

Javascript - Simple teclado con javascript

Códigos Javascript

El codigo de ejemplo muestra un sencillo Teclado usando javascript y css.
Visitas: 29,622 - 26-07-2008 21:33:36
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Codigo probado en ChromeCodigo probado en Mozilla FirefoxCodigo probado en Internet Explorer 7+Codigo probado en OperaCodigo probado en Safari


# Codigo ofrecido por Tutores.org

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Teclado javascript</title>
  6. <script>
  7. function AsignaValor(Nombre,Valor){
  8. var Campo = document.getElementById(Nombre);
  9. if(Valor==""){
  10. Campo.value="";
  11. }else{
  12. if(Campo.value!=""){
  13. Campo.value = Campo.value + Valor;
  14. }else{
  15. Campo.value = Valor;
  16. }
  17. }
  18. }
  19.  
  20. function marcador(Div,Nombre,Activar){
  21. var resultado="";
  22. var Numeros = new Array('1','2','3','4','5','6','7','8','9','0');
  23. 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');
  24. var x=Numeros.length;
  25. var a=Letras.length;
  26. for ( var i=0, len=x; i<len; ++i ){
  27. resultado +="<a class="teclas" onclick="AsignaValor('"+Nombre+"','"+Numeros[i]+"')">" + Numeros[i] + "</a>";
  28. }
  29. for ( var i=0, len=a; i<len; ++i ){
  30. resultado +="<a class="teclas" onclick="AsignaValor('"+Nombre+"','"+Letras[i]+"')">" + Letras[i] + "</a>";
  31. }
  32. resultado +="<a class="teclas limpiar" onclick="AsignaValor('"+Nombre+"','')">Borrar</a>";
  33. resultado +="<a class="teclas espacio" onclick="AsignaValor('"+Nombre+"',' ')">Espacio</a>";
  34. document.getElementById(Div).innerHTML=resultado;
  35. }
  36. </script>
  37. <style>
  38. .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;}
  39. .teclas:hover{background-color:#eeeeee;}
  40. #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;}
  41. .limpiar{width:59px;}
  42. .espacio{width:213px;}
  43. .campotexto{text-transform: uppercase;width:213px;border:1px solid #cccccc;font-size:11px;padding:3px;;color:green;}
  44. </style>
  45. </head>
  46. <body onload="marcador('contenedor','campo_clave',1)">
  47. <div><input type="text" class="campotexto" name="clave" id="campo_clave"  readonly /><div id="contenedor"></div></div>
  48. </body>
  49. </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 -->
COMENTARIOS
Comentario usuario
01-06-2012 02:18:47
4 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
23-01-2008 16:43:57
2 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?
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.