Code Notes

🔑Keycode

document.addEventListener('keydown', (event: KeyboardEvent) => {
  if (event.target instanceof Node && isFormField(event.target)) {
    return
  }
  if (event.isComposing) {
    // ignore keystrokes while an IME composition is in progress
    return
  }
  // do something
})

event.isComposing is all you need to detect IME composition these days — the old keyCode === 229 check is dead along with keyCode itself. If you need finer control, listen for compositionstart/compositionend.

Use event.key (the character/action, e.g. 'Enter', 'a') or event.code (the physical key, e.g. 'KeyA') to identify which key was pressed.

Alt link: http://keycode.info/

isFormField() util

export function isFormField(element: Node): boolean {
  if (!(element instanceof HTMLElement)) {
    return false
  }

  const name = element.nodeName.toLowerCase()
  const type = (element.getAttribute('type') || '').toLowerCase()
  return (
    name === 'select' ||
    name === 'textarea' ||
    (name === 'input' && type !== 'submit' && type !== 'reset') ||
    element.isContentEditable
  )
}