지금 누른 키가 뭐지?
아무 키나 누르면 event.key, event.code, 구형 keyCode가 나타납니다. 예를 들어 A 키는 key "a", code "KeyA", keyCode 65이고, Enter 키는 code "Enter", keyCode 13입니다.
사용 방법
- 페이지의 아무 곳이나 한 번 클릭한 뒤 키보드의 키를 누릅니다. 입력창을 클릭할 필요는 없습니다.
- 패널에서 키 이름, 물리 코드, 구형 keyCode를 확인합니다. Shift, Ctrl, Alt, Cmd를 함께 누르면 수정키 상태가 보이고, 키를 계속 누르고 있으면 반복 표시가 켜집니다.
- 복사 버튼으로 값을 코드에 가져다 쓸 수 있습니다. 아래 목록에는 최근 열 번의 입력이 남습니다.
계산 방법
브라우저는 키를 누를 때마다 keydown 이벤트를 보냅니다. event.key는 키가 만들어 내는 값("a", "A", "Enter" 등)으로 자판 배열과 Shift 상태에 따라 달라집니다. event.code는 키보드 위의 물리적 키("KeyA" 등)로 배열이 달라도 그대로라서 게임 조작에 알맞습니다.
event.keyCode는 예전 숫자 코드입니다. 더는 권장되지 않지만 오래된 스크립트와 jQuery 시절 코드에서 쓰이므로 함께 보여 줍니다. 입력기(IME)로 글자를 조합하는 중에는 229가 나옵니다. event.location은 키의 위치로 0 일반, 1 왼쪽, 2 오른쪽, 3 숫자 키패드입니다.
테스트 중 페이지가 스크롤되거나 도움말이 열리지 않도록 대부분의 키는 브라우저 기본 동작을 막습니다. Tab, Escape, F5, F11, F12와 Ctrl 또는 Cmd를 쓰는 단축키는 그대로 둡니다. Fn, 볼륨, 밝기 같은 운영체제 처리 키는 페이지까지 오지 않습니다.
자주 묻는 질문
event.key와 event.code는 뭐가 다른가요?
event.key는 키가 입력하는 값이라 자판 배열과 Shift에 따라 바뀝니다. event.code는 물리적 위치입니다. 프랑스 AZERTY 자판에서 Q 위치의 키는 code가 "KeyQ"이고 key는 "a"입니다. 게임 조작에는 code, 문자에 따라 달라지는 단축키에는 key를 쓰세요.
keyCode를 계속 써도 되나요?
아니요. keyCode와 which는 더 이상 권장되지 않습니다. 새 코드에서는 event.key나 event.code를 쓰세요. 숫자는 오래된 스크립트를 읽거나 고칠 때 보라고 보여 줍니다. 예를 들어 13은 Enter, 27은 Escape, 32는 Space입니다.
왜 229나 "Process"가 나오나요?
중국어, 일본어, 한국어 같은 입력기는 글자를 조합하는 동안 키를 먼저 가져가서 브라우저가 229를 알려 줍니다. 순수한 키 값이 필요하면 영문 자판으로 바꾸세요.
단축키나 미디어 키가 안 보이는 이유는?
운영체제나 브라우저가 페이지보다 먼저 키를 가져갈 수 있습니다. Ctrl+W, Alt+Tab, Cmd+Q, 많은 노트북의 Fn 줄이 그 예입니다. 페이지가 반응하지 않으면 그 키는 웹 코드까지 오지 않는 것입니다.