so i wanted to make a html/javascript to show keydown/keyup events
the problem is i think the events not working cuz the window dont have focus
is there a way to make it work ?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
document.addEventListener("keydown", displayDate);
document.addEventListener("keyup", displayDate2);
function displayDate(event) {
// document.getElementById(event.key).innerHTML =event.key;
document.getElementById(event.key).style.background="Goldenrod";
}
function displayDate2(event) {
// document.getElementById(event.key).innerHTML =event.key;
document.getElementById(event.key).style.backgroundColor = 'transparent';
}
</script>
<table>
<tr>
<td width="30" height="50" align="center" id="f">f</td>
<td width="30" height="50" align="center" id="d">d</td>
<td width="30" height="50" align="center" id="q">q</td>
<td width="30" height="50" align="center" id="w">w</td>
<td width="30" height="50" align="center" id="e">e</td>
<td width="30" height="50" align="center" id="1">1</td>
<td width="30" height="50" align="center" id="3">3</td>
</tr>
</table>
</body>
</html>
the problem is i think the events not working cuz the window dont have focus
is there a way to make it work ?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
document.addEventListener("keydown", displayDate);
document.addEventListener("keyup", displayDate2);
function displayDate(event) {
// document.getElementById(event.key).innerHTML =event.key;
document.getElementById(event.key).style.background="Goldenrod";
}
function displayDate2(event) {
// document.getElementById(event.key).innerHTML =event.key;
document.getElementById(event.key).style.backgroundColor = 'transparent';
}
</script>
<table>
<tr>
<td width="30" height="50" align="center" id="f">f</td>
<td width="30" height="50" align="center" id="d">d</td>
<td width="30" height="50" align="center" id="q">q</td>
<td width="30" height="50" align="center" id="w">w</td>
<td width="30" height="50" align="center" id="e">e</td>
<td width="30" height="50" align="center" id="1">1</td>
<td width="30" height="50" align="center" id="3">3</td>
</tr>
</table>
</body>
</html>