키코드 / 이벤트 뷰어
아무 키나 눌러 JavaScript 키 코드, 키 이름 및 이벤트 속성을 확인하세요
아무 키나 누르세요...
사용 방법
도구 열기
설정이 필요 없습니다 — 도구가 브라우저에서 즉시 로드됩니다.
조작하고 탐색하기
마우스, 키보드 또는 터치로 실시간 조작이 가능합니다.
언제 어디서나 사용 가능
데스크톱과 모바일 모두 지원 — 이동 중에도 연습하거나 제작할 수 있습니다.
이 도구를 사용하는 이유
100% 무료
숨겨진 비용도, 프리미엄 등급도 없습니다 — 모든 기능이 무료입니다.
설치 불필요
브라우저에서 완전히 실행됩니다. 소프트웨어를 다운로드하거나 설치할 필요가 없습니다.
프라이빗 & 안전
데이터가 기기 밖으로 나가지 않습니다. 어떤 서버에도 업로드되지 않습니다.
모바일 지원
완전 반응형 — 스마트폰, 태블릿, 데스크톱에서 사용할 수 있습니다.
JavaScript Keyboard Events: KeyCodes, Keys, and Codes
Key Takeaways
- The deprecated keyCode property has been replaced by the modern key (character value) and code (physical key) properties.
- Understanding the difference between key and code is essential for building keyboard shortcuts and games that work across keyboard layouts.
- All keyboard event detection happens in your browser — no keystrokes are recorded or transmitted.
Keyboard event handling is fundamental to interactive web applications — from keyboard shortcuts and form validation to games and accessibility features. JavaScript keyboard events have evolved significantly, with the deprecated keyCode property being replaced by the more intuitive key and code properties. Understanding these properties and their differences is essential for building robust keyboard interactions.
The key and code properties are supported in 97%+ of global browsers, making keyCode truly obsolete.
Browser Support
Key Concepts
key vs. code Properties
event.key represents the character value ('a', 'A', 'Enter', 'ArrowUp'). event.code represents the physical key ('KeyA', 'ShiftLeft', 'Digit1'). Use key for text input and code for keyboard shortcuts.
Event Types: keydown, keyup, keypress
keydown fires when a key is pressed (repeats while held). keyup fires when released. keypress is deprecated. Use keydown for most interactions and keyup for detecting when modifier keys are released.
Modifier Keys
event.ctrlKey, event.shiftKey, event.altKey, and event.metaKey (Cmd on Mac) are boolean properties that indicate which modifier keys were held during the event. Use them for keyboard shortcut combinations.
Layout-Independent Keycodes
event.code always refers to the physical key position regardless of keyboard layout. 'KeyA' is always the leftmost home-row key, even on AZERTY keyboards where it types 'q'. Use code for games, key for text.
Pro Tips
Use event.key for accessibility — screen readers and assistive technologies rely on semantic key values, not physical positions.
Always handle both Ctrl (Windows/Linux) and Meta/Cmd (Mac) for cross-platform keyboard shortcuts.
Call event.preventDefault() to stop default browser behavior for keyboard shortcuts (like Ctrl+S) but be careful not to break expected behaviors.
Use the 'isComposing' property to avoid interfering with IME (Input Method Editor) composition for CJK language input.
All keyboard event detection is performed entirely in your browser. No keystrokes are recorded, logged, or transmitted to any server.