키코드 확인
키보드 키의 event.code, key, keyCode 값을 확인합니다
캡처 영역을 클릭하고 아무 키나 누르면 event.key·event.code·keyCode·which·location 값과 Shift·Ctrl·Alt·Meta 눌림 상태가 큰 글씨로 표시되어 단축키 코드를 작성하며 값을 확인하기 좋습니다. 누른 키의 이력이 아래에 쌓여 조합키를 순서대로 눌러 본 결과를 비교할 수 있고, 자주 쓰는 Enter·Escape·화살표 등 14개 키는 참조표로 미리 제공됩니다. 방향키나 스페이스를 눌러도 페이지가 스크롤되지 않도록 막지만 Tab 과 브라우저 단축키는 가로채지 않아 키보드만으로도 빠져나올 수 있습니다. 게임 조작이나 접근성 단축키를 구현하는 프론트엔드 개발자가 주로 씁니다.
이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.
자주 사용하는 키
EnterEscapeSpaceTabBackspaceDeleteArrowUpArrowDownArrowLeftArrowRightShiftLeftControlLeftAltLeftMetaLeftevent.keyCode는 deprecated 되었습니다. event.code 또는 event.key를 사용하세요.키코드 확인, 이렇게 쓰세요
키보드를 누르면 event.key·event.code·keyCode 와 modifier 상태(Shift·Ctrl·Alt·Meta) 를 즉시 보여 줍니다.
단축키 기능을 구현하거나, 특정 키가 브라우저에서 어떤 값으로 들어오는지 확인할 때 씁니다.
keyCode 는 폐기(deprecated)된 속성이니 새 코드에서는 key 또는 code 를 쓰세요. 한글 입력 중에는 key 가 'Process' 로 잡힐 수 있습니다.
관련 도구
자주 묻는 질문
Q. key 와 code 는 뭐가 다른가요?
key 는 입력된 문자(레이아웃 반영), code 는 물리적 키 위치입니다. 게임 조작은 code, 글자 처리는 key 가 적합합니다.
Q. 왼쪽 Shift 와 오른쪽 Shift 를 구분할 수 있나요?
code 값이 ShiftLeft·ShiftRight 로 나뉘고 location 값도 1(왼쪽)·2(오른쪽)로 표시됩니다. key 값은 둘 다 Shift 로 같습니다.
Q. Mac 의 Command 키는 어떤 값으로 잡히나요?
key 는 Meta, code 는 MetaLeft·MetaRight, keyCode 는 91·93 입니다. Windows 키도 같은 Meta 로 들어오므로 OS 별 분기 없이 metaKey 로 처리할 수 있습니다.