nicetool.dev logo

키 코드 확인

키보드의 아무 키나 누르세요. 입력한 내용은 저장되거나 전송되지 않습니다.

키를 누르면 코드가 표시됩니다

event.key, event.code, keyCode의 차이

브라우저에서 키를 누를 때마다 여러 속성을 가진 KeyboardEvent가 발생합니다. event.key는 "a", "A", "Enter", "ArrowUp"처럼 키가 만들어 내는 값으로 사용자의 자판 배열과 Shift 상태를 따릅니다. event.code는 "KeyA", "Digit1"처럼 물리적인 키를 나타내므로 QWERTY, AZERTY, Dvorak 어느 자판에서도 같습니다. keyCode와 which는 오래된 숫자 코드로 폐기되었고 브라우저와 배열마다 일관되지 않습니다. 최신 코드에서는 문자와 단축키에 event.key를, 게임의 WASD 조작처럼 위치가 중요할 때 event.code를 씁니다.

기능

  • • 모든 키의 event.key, event.code, keyCode, event.location 표시
  • • Ctrl, Shift, Alt, Meta 상태와 키 반복 표시
  • • 누른 키에 대한 복사용 자바스크립트 if 문
  • • 최근 누른 키 기록
  • • 테스트 중 Space와 화살표 키로 인한 스크롤 방지

설계부터 개인정보 보호

키 이벤트는 이 페이지, 내 브라우저에서만 읽습니다. 누른 키가 기록되거나 전송되지 않습니다.

키로깅 없음, 100% 클라이언트 측.

키 코드 확인 사용 방법

  1. 1

    페이지 아무 곳이나 클릭해 포커스를 준 뒤 키를 누르세요. 휴대폰에서는 입력 칸을 눌러 화면 키보드를 엽니다.

  2. 2

    크게 표시되는 값이 event.key입니다. 그 아래에 event.code와 예전 keyCode가 나옵니다.

  3. 3

    카드에서 키 위치(왼쪽·오른쪽 Shift, 숫자 키패드)와 눌린 보조 키를 확인하고 클릭 한 번으로 값을 복사하세요.

  4. 4

    생성된 if 문을 keydown 핸들러에 복사하세요. 기록에 최근 키가 보여 조합을 비교할 수 있습니다.

활용 예시

키보드 단축키

Ctrl+K나 Cmd+K 검색이라면 조합을 눌러 보고 event.key === "k"와 event.ctrlKey || event.metaKey를 쓰면 Windows와 macOS 모두에서 동작합니다.

게임 조작

event.code("KeyW", "KeyA", "KeyS", "KeyD")를 쓰면 event.key가 "z"나 "q"가 되는 AZERTY 등 다른 배열에서도 이동 키가 같은 자리에 있습니다.

Enter로 전송

채팅 입력에서 event.key === "Enter"이고 !event.shiftKey인지 확인해 Enter로 보내고 Shift+Enter로 줄을 바꿉니다.

숫자 키패드와 좌우 키

앱에 필요하면 숫자 키패드의 Enter(location 3)와 기본 Enter, 왼쪽과 오른쪽 Shift(location 1과 2)를 구분합니다.

자주 묻는 질문

event.key와 event.code 중 무엇을 쓰나요?+

영문자 단축키, 텍스트 입력, Escape, Enter처럼 문자와 연결된 것은 event.key를 쓰세요. 게임이나 배열과 무관한 단축키처럼 물리적 위치가 중요하면 event.code를 씁니다.

keyCode가 폐기된 이유는?+

keyCode 값은 표준화된 적이 없어 브라우저, 자판 배열, keydown과 keypress마다 다릅니다. KeyboardEvent 표준은 이를 key와 code로 대체했고 모든 최신 브라우저가 지원합니다.

휴대폰 키보드에서 "Unidentified"나 229가 나오는 이유는?+

화면 키보드는 실제 키 코드 대신 composition 이벤트를 보내는 경우가 많고, 자동 수정이나 IME 입력에서 특히 그렇습니다. 모바일 텍스트 입력은 input이나 beforeinput 이벤트를 사용하세요.

일부 단축키가 페이지에 전달되지 않는 이유는?+

Ctrl+W, Ctrl+T, Cmd+Q, Alt+Tab 같은 조합은 브라우저나 운영체제가 먼저 처리하므로 웹 페이지가 잡거나 막을 수 없습니다.