The Old NetISSUE #48 of 60

keyboard events · keydown · keyup · key codes

Pixel PeteVSQuirks Mode

Pixel Pete saysKeyboard events — keydown and keyup — report keys via event.key and modifier flags.

keydown fires as a key goes down (and repeats while held); keyup on release. Read event.key for the character/name ("Enter", "ArrowLeft") and event.code for the physical key. Check shiftKey/ctrlKey/altKey/metaKey for combos. The old keyCode is deprecated — use key/code.

Power-ups you unlock

keydown (repeats) vs keyup (release)
event.key = name; event.code = physical key
Modifier flags: shift/ctrl/alt/metaKey
keyCode is deprecated

Quirks Mode attacks — common mistakes

Using deprecated keyCode
Confusing key (layout) with code (physical)
Not preventing default for handled shortcuts

Boss battleReport the key pressed and whether Ctrl was held on keydown.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><input id="i" placeholder="press keys"><pre id="o"></pre>
<script>document.getElementById('i').addEventListener('keydown',e=>document.getElementById('o').textContent='key='+e.key+' ctrl='+e.ctrlKey);</script></body></html>

▶ Open the interactive comic issue

‹ Mouse Events · Click · Mousemove · Mouseover Form Events · Submit · Change · Input ›