키 코드 뷰어

키 코드 뷰어란?#

키가 눌리면 브라우저는 “어떤 키?”라는 질문에 대한 두 개의 병행 답을 담은 KeyboardEvent를 발화합니다. key 필드는 그 누름이 만든 문자를 말합니다. a, A, Enter, ?. code 필드는 어떤 물리 키가 눌렸는지를 말합니다. KeyA, Enter, Slash — 배치와 무관. 이 두 답은 국제 키보드, 보조키, 또는 숫자 패드가 관여하는 순간 갈라지며, 그 차이가 바로 단축키, 게임 컨트롤, 접근성 기능을 연결할 때 봐야 할 것입니다.

이 페이지는 각 키 누름을 스냅숏으로 잡아 모든 필드를 드러냅니다. key, code, 레거시 keyCode와 which 숫자(오래된 코드 디버깅을 위해 유지), location(표준/왼쪽/오른쪽/숫자 패드), 활성 보조키, 그리고 누름이 자동 반복이었는지. 최근 누름의 굴러가는 기록이 보이어 화음이나 시퀀스를 추적할 수 있습니다.

글로벌은 아닙니다. 캡처는 포커스가 캡처 구역 안에 있을 때만 일어나서 페이지 나머지는 정상적으로 키보드를 계속 따릅니다.

사용 방법#

1. 상단의 점선 캡처 구역 안을 클릭합니다(또는 탭으로 들어갑니다). 듣고 있음을 보여 주기 위해 강조됩니다.
2. 키 또는 화음을 누릅니다. 아래 스냅숏 표가 매 keydown마다 갱신됩니다.
3. 행을 읽습니다.
   • 키 (key) — 논리적 키 값(브라우저가 해결한 문자 또는 이름 있는 키).
   • 코드 (code) — 물리적 키, 배치 무관. 단축키를 일치시킬 대상입니다.
   • keyCode 와 which — 사용 중단된 숫자 코드. 사용 중단 배지로 표시. 여전히 그것들을 읽는 오래된 코드를 포팅할 때만 일치시키세요.
   • 위치 — 표준, 왼쪽, 오른쪽, 또는 숫자 패드. 왼쪽 Shift와 오른쪽 Shift, 또는 숫자 패드 5와 상단 행 5를 구별하는 방법입니다.
   • 반복 — 키가 눌린 채 자동 반복 중이면 예.
   • 보조키 — Ctrl, Alt, Shift, Meta 중 눌려 있던 것의 배지.
4. 페이지가 키에 대해 브라우저가 행동하는 것을 멈추게 하려면(예: 테스트 중 Tab이 포커스를 빼앗아 가는 것을 막으려면) 옵션 표시줄의 키의 기본 동작 차단 에 표시합니다.
5. 현재 복사 로 현재 스냅숏을 가져오고, 기록 패널의 기록 지우기 로 굴러가는 목록을 재설정합니다.

주요 기능#

• key와 code를 나란히. 키보드 처리에서 가장 유용한 단일 구분을 매 누름에 보이게 합니다. 그래서 key === "@"가 어떤 배치에서는 Shift+Digit2에서, 다른 배치에서는 완전히 다른 물리 키에서 올 수 있는 이유를 즉시 알게 됩니다.
• 위치 인식. 왼쪽과 오른쪽 보조키가 분리되어 보고되고 숫자 패드 키는 위치: 숫자 패드를 실습니다. 같은 숫자가 주 행과 숫자 패드에서 다른 것을 의미하는 게임 레이아웃에 필수.
• 보조키 배지. Ctrl, Alt, Shift, Meta(macOS의 Command, 다른 곳의 Super/Windows)가 관례적 순서로 표시되어 한눈에 화음을 읽을 수 있습니다.
• 명확히 표시된 레거시 필드. keyCode와 which는 사용 중단되어 현대 사양에서 제거되었지만 많은 기존 코드가 여전히 읽습니다. 가시적 사용 중단 태그와 각주와 함께 드러나며, 결코 주 답으로가 아닙니다.
• 20개 굴러가는 기록. 키를 잡고 반복이 자동 발화마다 예로 넘어가는 것을 보세요. 시퀀스를 누르고 되짚어 가세요. 각 항목은 격리된 스냅숏입니다.
• 범위 지정 캡처. 리스너는 창이 아니라 캡처 구역에 묶입니다. 다시 구역에 포커스하기 전까지 페이지 나머지 — 탭 이동, 스크롤 — 가 계속 동작합니다.

사용 예#

고전적 혼란의 원인은 상단 행 1과 숫자 패드 1의 차이입니다. 같은 문자를 만들지만 같은 키가 아닙니다.

상단 행 1을 누르면 스냅숏은 다음을 읽습니다.

key        1
code       Digit1
keyCode    49      (legacy)
which      49      (legacy)
location   standard
repeat     no
modifiers  none

이제 숫자 패드 1을(Num Lock 켜짐) 누르면 스냅숏은 다음을 읽습니다.

key        1
code       Numpad1
keyCode    97      (legacy)
which      97      (legacy)
location   numpad
repeat     no
modifiers  none

같은 key, 다른 code, 다른 위치, 다른 레거시 코드. 단축키를 바인딩하는 중이라면 code === "Digit1"로 “문자 위의 행”을 뜻하게 하고 code === "Numpad1"로 “숫자 패드”를 뜻하게 합니다. 그리고 둘 다 발화하는 key === "1"에 일치시키는 함정을 피합니다.

FAQ#

key와 code 중 어느 것에 일치시켜야 하나요?#

무엇을 만드는지에 달려 있습니다. 단축키와 게임 컨트롤에는 code 에 일치시키세요. 키의 물리적 위치가 중요하고 사용자가 Dvorak이나 비 라틴 배치로 전환할 때 바인딩이 바뀌길 원하지 않을 때. 텍스트 입력에는 key 에 일치시키세요. 만들어진 문자가 관심인 것(? 대 /, 또는 데드키 조합 문자). 보조키 화음에는 보조키 자체의 key 값보다 보조키 플래그(ctrlKey, metaKey …)를 점검하세요.

왜 keyCode와 which가 “사용 중단”으로 표시되나요?#

UI 이벤트 사양에서 사용 중단되고 제거되었습니다. 브라우저는 호환을 위해 여전히 채우지만, 값은 브라우저나 배치에 따라 결코 일관되지 않았습니다(같은 물리 키가 다른 숫자를 보고할 수 있음). 현대 코드는 key와 code를 읽어야 합니다. 여기 표시되는 것은 오래된 코드를 디버깅하거나 포팅할 수 있도록 하기 위해서입니다. 새 바인딩에 절대 쓰지 마세요.

페이지가 내 키 입력을 캡처하지 않습니다. 왜요?#

캡처는 점선 구역에 범위 지정됩니다. 포커스가 다른 곳으로 옮겨갔다면 — 탭으로 나갔거나 다른 컨트롤을 클릭했기 때문 — 구역은 듣기를 멈춥니다. 구역 안을 다시 클릭하면(강조될 것입니다) 누름이 다시 등록됩니다. 이 범위 지정은 의도적입니다. 페이지 나머지를 키보드 접근 가능하게 유지합니다.

Meta 키는 Command인가요 Windows인가요?#

둘 다 — Meta는 플랫폼의 “super” 키입니다. macOS의 Command, Linux와 Windows의 Windows/Super 키. 배지는 OS를 추측하는 대신 Meta라고 읽힙니다. 기저의 metaKey 필드가 코드가 실제로 점검해야 하는 것이기 때문입니다.