Workshop › Wordle-style Word Guess › Step 8 of 26

Type with the keyboard

What we are doing

Each key press sends a keydown event. The keyboard sends all kinds of keys ('Shift', 'F5', '1'...), so we keep only single letters from a to z, tested with a regular expression. Capitals become lower case first.

```js
document.addEventListener('keydown', (event) => {
  const key = event.key.length === 1 ? event.key.toLowerCase() : event.key
  if (/^[a-z]$/.test(key)) {
    event.preventDefault()
    type(key)
  }
})
```

What it means

event.key is the key's name: 'a', 'A' (with Shift or Caps Lock), 'Shift', 'Enter'...
One-character keys are turned into lower case; longer names stay as they are.
/^[a-z]$/ is a pattern: exactly one character from a to z. .test(key) says whether key matches it.
event.preventDefault() stops the browser from doing its own thing with the key.

Your turn

Under the type function, leave an empty line and write the listener. Press Run, click the game and type.

Skills: Keyboard and mouse input

← The typed letters Show the letters →

All steps