JavaScript 키코드 조회기
아무 키나 누르면 event.key, event.code, keyCode, which, location, 수정자(modifier) 값을 보여주는 keycode.info 스타일 조회기입니다.
Tab 키는 표시되지만 포커스는 이동하므로 패널을 빠져나갈 수 있습니다. 일부 브라우저 단축키(F5, Ctrl+W…)는 가로챌 수 없습니다.
페이지의 입력칸에 치는 키는 그 입력칸으로 가고 여기서는 읽지 않습니다. 버튼이나 링크에 포커스가 있으면 Enter와 Space는 읽히면서 그 버튼도 누릅니다.
키 하나의 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 닫기 같은 브라우저 단축키는 어떤 웹페이지도 가로챌 수 없습니다.
키를 누르기 전에 패널을 클릭해야 하나요?
아니요. 페이지 어디에 포커스가 있든 키를 읽으므로 버튼에 포커스가 있어도 읽힙니다. 예외 두 가지는 패널 아래에 적혀 있습니다 — 페이지의 입력칸에 치는 키는 그 입력칸으로 가고, 버튼이나 링크에서는 Enter와 Space가 읽히면서 그 버튼도 누릅니다. 상태 표시 점은 키가 페이지에 닿고 있는지 알려 주며, 다른 창에 포커스가 가 있다면 페이지를 클릭하면 다시 읽습니다.