재미있는 기억만 남기자

# Keyboard: keydown and keyup

<input> 필드에 대한 입력을 추적하려면 Keyboard 이벤트로 부족하다

# event.code and event.key

  • event.code 물리적 key code
  • event.key 누른 문자를 표현
Key event.key event.code
Z z (lowercase) KeyZ
Shift+Z Z (uppercase) KeyZ

키보드 자판 Z 는 언어/OS 에 따라 z 이외에도 달라질 수 있지만, code 는 항상 KeyZ

# other key codes

키보드의 각 키는 모두 code 를 가지고 있다.

  • 문자 키
    • Key<letter> : KeyA, KeyB ..
  • 숫자 키
    • Digit<number> : Digit0, Digit1
  • 특수 키
    • Enter, Backspace, Tab, Quote ...

콘솔에 다음과 같이 입력하고, 웹페이지에서 아무 키나 눌러보자

const dom = document.querySelector('body')
dom.addEventListener("keydown", e => {
    console.log(e.key, e.code)
})
1
2
3
4

event.key 가 표현하지 못하는 Shift 나 F1 같은 키는 event.code 와 같거나 유사한 값을 가진다.

Key event.key event.code
F1 F1 F1
Backspace Backspace Backspace
Shift Shift ShiftRight or ShiftLeft

event.code ctrl + z 를 os/언어 에 상관없이 인식하는 방법

document.addEventListener('keydown', function(event) {
  if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
    alert('Undo!')
  }
});
1
2
3
4
5

같은키, 다른 레이아웃

image

event.code == 'KeyZ' 를 체크할 때,

  • German 레이아웃에서는 Y 를 누르기 때문에 체크하지 못한다.

  • 이 경우 event.key 레이아웃 종속 문자가 더 안전할 수도 있다.

# event.repeat

auto-repeat

  • key 를 일정 시간 이상 계속 누르고 있을 때
  • keydown 이 반복적으로 일어나면 true 가 된다.

마지막으로 single keyup 으로 마무리 된다.

# 기본 동작들

  • 문자가 스크린에 등장하는 것
  • 문자가 Delete 키로 인해 삭제 되는 것
  • PageDown 키로 인해 페이지가 스크롤 되는 것
  • Ctrl + S 를 통해 브라우저가 '페이지 저장' dialog 를 여는 것
  • 등..

# 기본 동작 취소하기

  • keydown 의 이벤트를 prevent 하면 대부분의 기본동작을 막을 수 있다.
  • OS 기반 특수키로 인한 기본 동작은 막을 수 없다
    • windows Alt + F4
    • 자바스크립트로 막을 수 없다

# Legacy

keypress, keyCode, charCode, which

  • browser 호환성 문제

# Reference & Comment

← Scroll 이벤트 →