<!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>