key · code · keyCode의 차이
event.key는 그 키가 만들어 내는 문자 또는 의미("a", "A", "Enter", "ArrowLeft")입니다. Shift를 누르고 a를 치면 "A"가 되고, 한글 자판 상태면 "ㅁ"이 됩니다. event.code는 물리적 키 위치("KeyA", "Digit1", "Numpad1")라서 자판 배열이나 Shift와 무관하게 늘 같습니다. 게임 조작처럼 "왼손 위치의 그 키"가 중요하면 code, 사용자가 입력한 문자가 중요하면 key를 써야 합니다. keyCode와 which는 오래된 숫자 코드로 브라우저마다 다를 수 있고 표준에서 폐기(deprecated)되었지만, 옛 코드 호환 때문에 아직 값은 나옵니다.
수정키와 위치
Shift·Ctrl·Alt·Meta(Windows 키/Command)는 shiftKey 등 불리언 속성으로 따로 옵니다. 수정키 자체를 누를 때도 keydown이 발생하며 이때 key는 "Shift" 같은 이름입니다. location은 같은 이름의 키가 여러 개일 때 구분합니다. 왼쪽 Shift는 1, 오른쪽 Shift는 2, 숫자패드 키는 3입니다. 숫자패드의 Enter는 key가 "Enter"로 같지만 code는 "NumpadEnter"로 다릅니다.
한글 입력과 isComposing
한글·일본어·중국어처럼 조합형 입력기(IME)를 쓰는 동안에는 keydown의 key가 "Process"로 오고 isComposing이 true가 됩니다. 이 상태에서 Enter를 처리하면 조합 중인 글자가 확정되는 순간과 겹쳐 두 번 실행되는 버그가 흔하므로, 단축키 로직에서는 if(e.isComposing) return;을 먼저 넣는 것이 안전합니다. 이 페이지에서는 영문 상태로 테스트하면 정확한 값이 보입니다.
기본 동작 막기
테스트 중 스페이스로 페이지가 스크롤되거나 백스페이스로 뒤로 가는 것을 막기 위해 대부분의 키에 preventDefault()를 호출합니다. 다만 Tab(포커스 이동), F5(새로 고침), F12(개발자 도구), Ctrl·Cmd 조합은 막지 않아 브라우저 조작이 계속 가능합니다.
자주 묻는 질문
키를 눌러도 반응이 없어요.
"준비" 버튼을 눌러 결과 영역이 나타난 상태여야 합니다. 또 다른 textarea에 포커스가 있으면 기록하지 않으니 입력칸이나 빈 곳을 클릭한 뒤 눌러 보세요.
keyCode를 써도 되나요?
새 코드에서는 권장하지 않습니다. 폐기된 속성이고 키보드 배열에 따라 값이 달라질 수 있습니다. 문자 판별은 key, 물리 위치는 code를 쓰세요.
Windows 키나 Command 키는 어떻게 나오나요?
key는 "Meta", code는 "MetaLeft"/"MetaRight"로 옵니다. 다만 OS가 먼저 가로채는 조합(Win+D 등)은 브라우저까지 오지 않습니다.