keydown, keyup, keypress

by cat_991

HTML

Press any key and get the message here: <span id="state-msg"></span>
<br>
Up arrow/W: <span id="up"></span>
<br>
Down arrow/S: <span id="down"></span>
<br>
Left arrow/A: <span id="left"></span>
<br>
Right Arrow/D: <span id="right"></span>
<br>
<br>
All Keys Pressed: <span id="all"></span>

JavaScript

var msg = document.getElementById('state-msg');
var map = {}; // You could also use an array
var all = [];
var keys = {up: document.getElementById('up'), down: document.getElementById('down'), left: document.getElementById('left'), right: document.getElementById('right'), all: document.getElementById('all')}
onkeydown = onkeyup = function(e){
    e = e || event; // to deal with IE
    if (e.type == 'keyup') all.splice(all.indexOf(e.code), 1);
    else if (e.type == 'keydown') if (!all.includes(e.code)) all.push(e.code)
    keys.all.textContent = all
    map[e.keyCode] = e.type == 'keydown';
    msg.textContent = e.keyCode
    keys.up.textContent = map[38] || map[87];
    keys.down.textContent = map[40] || map[83];
    keys.left.textContent = map[37] || map[65];
    keys.right.textContent = map[39] || map[68];
}