JavaScript 키코드 조회기 — event.key · code · keyCode 확인
아무 키나 누르면 그 키의 event.key, event.code, keyCode, which, location, 수정자(modifier) 값을 보여주는 keycode.info 스타일 조회기. 100% 브라우저에서 동작, 업로드 없음.
Tab 키는 표시되지만 포커스는 이동하므로 패널을 빠져나갈 수 있습니다. 일부 브라우저 단축키(F5, Ctrl+W…)는 가로챌 수 없습니다.
🔒 모든 처리가 브라우저 안에서 이뤄지며 입력한 키는 업로드·기록되지 않습니다.
키 하나의 JavaScript 이벤트를 그대로 확인
패널을 클릭하고 아무 키나 누르면 브라우저 keydown 이벤트가 노출하는 속성을 그대로 볼 수 있습니다: event.key(실제 입력되는 값), event.code(레이아웃과 무관한 물리적 키), 레거시 event.keyCode·event.which 숫자, 키 location(좌/우/숫자패드), 그리고 함께 눌린 Ctrl·Shift·Alt·Meta 수정자까지. 전체 결과는 버튼 한 번으로 복사해 버그 리포트나 단축키 처리 코드에 붙여넣을 수 있고, 표의 각 행에 있는 복사 버튼으로 KeyA나 13처럼 값 하나만 따로 복사할 수도 있습니다.
key · code · keyCode 의 차이
event.key는 키의 뜻으로 a, A, Enter, ArrowLeft처럼 Shift와 키보드 레이아웃에 따라 바뀝니다. event.code는 KeyA, Numpad1처럼 물리적 키를 가리키며 레이아웃과 무관하게 고정돼, 게임 조작이나 위치 기반 단축키에 적합합니다. event.keyCode와 event.which는 오래된 숫자 코드로 deprecated 이지만 레거시 코드에 자주 남아 있어, 읽기 쉬운 이름과 함께 보여줍니다(예: 13 → Enter).
자주 묻는 질문
event.key와 event.code는 무엇이 다른가요?
event.key는 키가 만들어내는 문자나 이름으로 Shift·레이아웃에 따라 바뀝니다(A → "a" 또는 "A"). event.code는 물리적 키(KeyA, Numpad1)를 가리키며 레이아웃과 무관해서 위치 기반 단축키나 게임 조작에 더 적합합니다.
keyCode를 계속 써도 되나요?
event.keyCode와 event.which는 deprecated 입니다. 현재 브라우저에서 여전히 동작하지만 새 코드는 event.key나 event.code를 쓰는 것이 좋습니다. 이 도구는 레거시 코드를 읽고 이전하기 쉽도록 keyCode와 그에 대응하는 이름을 함께 보여줍니다.
Tab이나 F5 키가 이상하게 동작하는 이유는?
패널은 깨끗한 측정을 위해 대부분의 기본 동작을 막지만, 키보드 사용자가 갇히지 않도록 Tab은 일부러 포커스를 이동시킵니다. 그리고 F5 새로고침, Ctrl+W 닫기 같은 브라우저 단축키는 어떤 웹페이지도 가로챌 수 없습니다.
누른 키가 어디론가 전송되나요?
아니요. 모든 처리는 브라우저 안에서 JavaScript로 이뤄집니다. 누른 키는 이 도구의 코드가 브라우저 안에서 읽을 뿐, 업로드·저장·기록하지 않습니다.