aqui esta: ta sencillo pero hace lo que pides. solo es de modificarlo y que quede como gustes.
saludos
Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script language="javascript">
function MakeString(tecla) {
var mytexto = document.getElementById("mytexto");
mytexto.value += String.fromCharCode(tecla);
}
</script>
<body>
<input type="text" size="30" id="mytexto">
<script language="javascript">
function drawkeybord() {
var html = "";
html += "<table align='center' width='400' border='0' cellspacing='2' cellpadding='2' style='font-family:Arial, Helvetica, sans-serif; font-size:11px;'>\n";
html += "<tr align='center'>\n";
for (i=48; i <= 57; i++) {
html += "<td style='border:1px solid #000000; cursor:pointer;' onclick='MakeString(" + i + ")'><strong>" + String.fromCharCode(i) + "</strong></td>\n";
}
html += "</tr>\n";
html += "</table>\n";
//alert(html);
document.write(html);
}
drawkeybord();
</script>
</body>
</html> pd. apoyate en esta pagina para que saques los ascii para las otras teclas (A-Z).
http://ascii.cl/htmlcodes.htm