1. Keyboard

Common keys

1. Tab

Tab, Shift + Tab

• cycles through focusable elements, inkluding links, buttons and form elements
• when you tab into a (focusable) element, the element gets a focus state
  • event.type keydown, keyup
  • event.key Tab
  • event.code Tab

2. Arrow Keys (and more)

🔼 ▶️ 🔽 ◀️

• 🔼/🔽 move the scrollbar
• same goes for horizontal scrollbars and ◀️/▶️
• 🔼/🔽 selects a radio option (non-reversible)
• 🔼/🔽 selects a select option
• bild 🔼/🔽 scrolls up/down a page
• pos1/endescroll to the top/end of the website
  • event.type keydown, keyup
  • event.key ArrowUp, ArrowDown, ArrowRight, ArrowLeft
  • event.code ArrowUp, ArrowDown, ArrowRight, ArrowLeft

3. Space

Space

• Space triggers the click event and activates a focused button
• Space does not trigger a click event on a focused link
• Space selects a checkbox
• Space opens a select menu and chooses an option from the menu
• Space chooses a radio option
• Space/Shift + Space does the same like bild 🔼/🔽, it scrolls up and down by one page on a website
  • event.type keydown, keypress, keyup
  • event.key -
  • event.code Space

4. Enter

Enter

• Enter submits a form when
  • the focus is inside the form
  • the form has a submit button
  • the focus is not in the textarea (this would create a new line)
  • the focus is not in an opened <select> menu, where it would confirm the currently selected option
• Enter is usually used to confirm or submit things
• Enter, like Space, triggers the click event and activates a focused button
• Enter, unlike Space, navigates to the href of a focused link
  • event.type keydown, keypress, keyup
  • event.key Enter
  • event.code Enter

5. Escape

esc

• esc quits a feature (a search for example)
  • event.type keydown, keyup
  • event.key Escape
  • event.code Escape

6. Backspace

Backspace

• Backspace is used to delete things
  • event.type keydown, keyup
  • event.key Backspace
  • event.code Backspace

Keyboard events

1. keydown fires first
2. keypress fires next, if the pressed key is a character key
3. keyup fires last

So keydown and keyup fire on non-character keys, keydown, keypressed and keyup fire on character keys. The triggered event can be logged with event.type.

Non-character keys are:

1. Escape
2. F1 - F12
3. Delete/Backspace
4. Tab
5. Caps lock
6. Modifier keys like Shift, Ctrl/Strg, Option, Command/Alt
7. Arrow Keys

Character keys are:

1. all alphabet characters (A to Z)
2. all number characters (1, 2, 3, ...)
3. All punctuation (, . ; ...)

Logging keyboard events

function logEventType(event) {
  console.log(event.type);
  console.log(event.repeat);
  console.log(event.key);
  console.log(event.code);
  // Use backticks in real code, astro refuses cooperation
  console.log('Don't use: ' + 'event.keyCode');
};

document.addEventListener('keydown', logEventType);
document.addEventListener('keypress', logEventType);
document.addEventListener('keyup', logEventType);

Repeating keyboard events

When non-character keys are held down, the keydown event fires repeatedly,
when character keys are held down, the keydown and the keypress events fire repeatedly.

When the keys (character and non-character) are released, the keyup events fires once. This can be logged with event.repeat.

Keydown or keyup?

• Arrow keys scroll on keydown
• Tab focuses the next focusable element on keydown
• Space and Enter trigger click events on a <button> element on keyup

Keyboard events on focused elements

An element can listen to a keyboard event when it recieves focus.
Keyboard events bubble up to the document.
Avoid event delegation when dealing with keyboard events! An event might not fire if the user clicked inside the component (but not on a focusable element).

const buttonKbd = document.querySelector('.eventTest');
buttonKbd.addEventListener('keydown', e => {
  e.stopImmediatePropagation();
  // Use backticks in real code, astro refuses cooperation
  console.log('From button: ' + 'e.type');
});
document.addEventListener('keydown', e => {
  // Use backticks in real code, astro refuses cooperation
  console.log('From document: ' + 'e.type');
});

Getting the key that is pressed

You can get the value of a key with two properties:

• key gets the value of the pressed key (use this in most situations)
• code gets the value of the key on a physical keyboard