ZeroTool Workbench

JavaScript 키 코드 탐색기

브라우저에서 아무 키나 누르면 event.key, event.code, keyCode, charCode, location, repeat, 수정자 키 상태를 즉시 표시. 복사 가능한 JS 스니펫 제공. 100% 클라이언트사이드, 설정 불필요.

100% 클라이언트 사이드 데이터가 브라우저 밖으로 나가지 않습니다 무료 · 회원가입 불필요
Click here, then press any key
⌨
0 keys captured

Event properties

event.key —
event.code —
keyCode (deprecated) —
which (deprecated) —
charCode (deprecated) —
location —
repeat —
isComposing —

Modifier keys

Shift Ctrl Alt Meta

Ready-to-copy JS snippet

Recent keys

관련 도구

ASCII 변환기 텍스트와 ASCII 코드 간 변환. 10진수, 16진수, 2진수 표현 지원. Unicode 텍스트 변환기 텍스트를 다양한 Unicode 장식 스타일로 변환: 굵게, 기울임, 스크립트, 프락투르, 이중선, 동그라미 등. 한 번 클릭으로 복사. 텍스트 ↔ 바이너리 변환기 텍스트와 바이너리(UTF-8)를 상호 변환. 공백 구분 및 연속 형식 지원. 100% 클라이언트 처리. UUID 생성기 즉시 v4 UUID 생성 — 단건 또는 일괄 생성. 색상 변환기 HEX, RGB, HSL 형식 간 색상 변환. 실시간 색상 미리보기. 정규식 테스터 매치 하이라이트와 캡처 그룹 세부 정보로 정규식을 실시간 테스트.

사용 방법

  1. 캡처 패드를 클릭하면 첫 로드 시 자동으로 키보드 포커스를 가져갑니다.
  2. 아무 키나 누르세요. 수정자 키, 펑션 키, 화살표 키 모두 동작합니다.
  3. event.key, event.code 및 폐지된 keyCode / which / charCode 값을 확인하세요.
  4. Shift / Ctrl / Alt / Meta를 누르고 있으면 해당 수정자 키 pill이 켜집니다.
  5. 생성된 JS 스니펫을 복사하여 자신의 코드에 그대로 사용할 수 있습니다.

event.key vs event.code vs keyCode

프론트엔드 키보드 버그의 대부분은 이 세 가지 속성을 혼용한 데서 비롯됩니다. 참조표:

속성레이아웃 영향권장 여부QWERTY에서 A 누를 때 값
event.key있음(현재 레이아웃 반영)권장 — 시맨틱 판정”a” 또는 Shift 시 “A”
event.code없음(물리 위치)권장 — 게임 / 단축키 바인딩”KeyA”
keyCode없음비권장 — 폐지됨65
which없음비권장 — 폐지됨65
charCode없음비권장 — keydown 시 항상 00

주요 사용 사례

  • 키보드 핸들러 디버깅 — 실제 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 같은 시스템 단축키는 가로채지 않으며 브라우저 기본 동작이 유지됩니다.

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에서 확인 가능합니다.