JavaScript 키 코드 탐색기
브라우저에서 아무 키나 누르면 event.key, event.code, keyCode, charCode, location, repeat, 수정자 키 상태를 즉시 표시. 복사 가능한 JS 스니펫 제공. 브라우저에서 처리, 설정 불필요.
- 브라우저에서 처리
- 데이터가 브라우저 밖으로 나가지 않습니다
- 무료 · 회원가입 불필요
WeChat으로 스캔하여 공유
예시·자세한 설명·자주 묻는 질문 실제 출력이 있는 예시, 다른 도구와의 차이, 자주 묻는 질문.
event.key vs event.code vs keyCode
프론트엔드 키보드 버그의 대부분은 이 세 가지 속성을 혼용한 데서 비롯됩니다. 참조표:
| 속성 | 레이아웃 영향 | 권장 여부 | QWERTY에서 A 누를 때 값 |
|---|---|---|---|
| event.key | 있음(현재 레이아웃 반영) | 권장 — 시맨틱 판정 | ”a” 또는 Shift 시 “A” |
| event.code | 없음(물리 위치) | 권장 — 게임 / 단축키 바인딩 | ”KeyA” |
| keyCode | 없음 | 비권장 — 폐지됨 | 65 |
| which | 없음 | 비권장 — 폐지됨 | 65 |
| charCode | 없음 | 비권장 — keydown 시 항상 0 | 0 |
주요 사용 사례
- 키보드 핸들러 디버깅 — 실제 event.key 값을 if 조건에 붙여 오타를 잡습니다.
- 게임 컨트롤 구현 — event.code를 사용하면 AZERTY 레이아웃에서도 WASD가 작동합니다.
- 커맨드 팔레트 단축키 — event.key를 e.ctrlKey / e.metaKey와 조합합니다.
- 레거시 코드 감사 — keyCode / which를 읽어 옛 핸들러를 event.key로 이전합니다.
- IME 입력 상태 판별 — e.isComposing = true는 한글/일본어 IME가 조합 중임을 의미하므로 단일 키 핸들러는 즉시 종료해야 합니다.
preventDefault 동작
캡처 패드는 Tab, Space, Backspace, 화살표 키, F1-F12에 대해서만 preventDefault()를 호출합니다 —
브라우저가 네비게이션/페이지 동작으로 소비하는 키들입니다. Ctrl+W / Cmd+Q 같은 시스템 단축키는
가로채지 않으며 브라우저 기본 동작이 유지됩니다.
키보드 배열과 입력기
event.code는 물리 키를 US 키보드에서의 위치로 이름 붙입니다. UI Events KeyboardEvent code Values 명세에 따르면 “KeyQ”는 US 키보드에서 q, 프랑스어 AZERTY 키보드에서 a가 새겨진 키입니다. 그래서 AZERTY에서 a를 치면 key: “a”, code: “KeyQ”가 됩니다. 키 위치가 중요한 단축키(WASD 이동)는 code로, 입력되는 글자가 중요한 단축키(Ctrl+Z 실행 취소)는 key로 판단하세요.
한국어 키보드에는 US 배열에 없는 “Lang1”(한/영)과 “Lang2”(한자) 키가 있습니다. 패드에서 눌러 브라우저가 보내는 값을 확인할 수 있습니다.
입력기가 글자를 조합하는 동안에는 UI Events 규정에 따라 keydown의 keyCode가 229이고 isComposing이 true입니다. Enter를 처리하기 전에 isComposing을 확인하지 않으면, 한글 조합 중 누른 Enter로 폼이 제출될 수 있습니다.
제한
- 휴대폰과 태블릿의 소프트 키보드는 보통 완전한 keydown 대신 입력한 글자가 담긴
input이벤트를 보냅니다. 패드 아래 대체 입력란은 그 글자를key로 보여 주고code,keyCode,which,charCode는 비워 둡니다. input 이벤트는 어떤 키를 눌렀는지 알려 주지 않기 때문입니다. - Ctrl+W, Cmd+Q 같은 단축키는 브라우저와 운영체제가 처리하므로 페이지에 전달되지 않습니다.
FAQ
event.key, event.code, keyCode의 차이는?
event.key는 키보드 레이아웃이 적용된 후의 가독 문자 또는 명명된 키 값입니다(Dvorak 레이아웃에서 물리 A 위치를 누르면 'a'가 됨). event.code는 미국 QWERTY 기반의 물리 키 위치(KeyA, Digit1, ArrowUp)이며 레이아웃에 영향받지 않습니다. keyCode는 레거시 숫자 코드(A는 65)로 사양상 더 이상 권장되지 않지만 호환성을 위해 주요 브라우저는 계속 발생시킵니다.
왜 keyCode, which, charCode는 폐지되었나?
세 가지 모두 브라우저 간 일관성이 없고 비라틴 레이아웃에서 모호합니다. 현대 코드는 event.key(시맨틱) 또는 event.code(물리 위치)를 사용해야 합니다. MDN은 keyCode와 charCode를 'deprecated, not recommended for production'으로 명시하지만 주요 브라우저는 호환성 때문에 계속 출력합니다. 본 도구는 원시 값을 그대로 표시하여 레거시 코드 감사에 활용할 수 있습니다.
Shift / Ctrl / Alt / Meta 수정자 키는 어떻게 확인하나?
KeyboardEvent의 e.shiftKey, e.ctrlKey, e.altKey, e.metaKey를 직접 읽으면 됩니다. 각각 boolean입니다. 주의: e.metaKey는 Windows에서 Win 키, Mac에서 Command 키에 해당합니다. 이 페이지에서 생성되는 스니펫은 현재 수정자 키 상태를 반영하여 자동으로 판정식을 구성합니다.
모바일에서 동작하나?
모바일 물리 키보드 이벤트는 플랫폼마다 일관되지 않습니다 — 많은 소프트 키보드는 문자별 keydown을 발생시키지 않고 input 이벤트로 최종 문자열만 전달합니다. 본 도구는 데스크톱 브라우저를 전제로 설계되었으며 데스크톱 환경에서 물리 키 신호가 가장 완전합니다. 모바일에는 부분 정보만 얻을 수 있는 단일 문자 입력란 폴백을 제공하지만, 전체 이벤트 속성 검사는 데스크톱 브라우저를 사용하세요. 설계상 모바일 keydown 에뮬레이션은 시도하지 않습니다.
키 입력 데이터가 서버로 전송되나?
전송되지 않습니다. 모든 이벤트 처리는 브라우저 네이티브 KeyboardEvent API로 로컬에서 이루어지므로 누른 키 정보는 기기를 떠나지 않습니다. DevTools → Network에서 확인 가능합니다.