<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get key code on key up</title>
<style>
td {
border:1px #BBB solid;
width:100px; height:100px;
}
input {
width:100px; height:100px;
font-size:54px;
text-align:center;
background-color:#E9F1FA;
}
</style>
<script>
function showin(el)
{
document.getElementById(el.id).style.backgroundColor = "#FCE39C";
}
function showout(el)
{
document.getElementById(el.id).style.backgroundColor = "#E9F1FA";
}
function getkey(e,el)
{
var inkey = "";
if (document.getElementById(el.id).innerHTML.length == 0) { // if set do not enter to add
switch(e.key) {
case "1":
case "2":
case "3":
case "4":
inkey = e.key;
default : {} // showout(el); // error
}
document.getElementById(el.id).value = inkey; // insert the value to the TD
if (inkey == "") showout(el); // set color not filled
}
}
</script>
</head>
<body>
<table align="center">
<tr>
<td><input id="0-0" type="text" onkeydown="showin(this)" onkeyup="getkey(event,this);" onmouseout="showout(this)"></td>
<td><input id="1-0" type="text" onkeydown="showin(this)" onkeyup="getkey(event,this);" onmouseout="showout(this)"></td>
</tr>
<tr>
<td><input id="0-1" type="text" onkeydown="showin(this)" onkeyup="getkey(event,this);" onmouseout="showout(this)"></td>
<td><input id="1-1" type="text" onkeydown="showin(this)" onkeyup="getkey(event,this);" onmouseout="showout(this)"></td>
</tr>
</table>
</body>
</html>