키 코드 정보

누른 키의 JavaScript 키 코드, 코드, 위치, 보조 키 정보를 확인합니다.

키보드에서 누른 키의 key, keyCode, code, location 값과 함께 눌린 수정 키를 보여 줍니다. 단축키를 만들거나 키 이벤트를 디버깅하기 전에 값을 확인할 때 씁니다.

사용 순서

페이지가 활성화된 상태에서 확인하려는 키를 한 번 누릅니다.
큰 글자로 표시된 key 값을 확인합니다.
아래 표에서 keyCode, code, location 값을 확인합니다.
Shift나 Ctrl을 함께 누르면 Modifiers 칸에 조합된 이름이 표시됩니다.

예시

Shift를 누른 채 a를 누르면 Key는 A, Code는 KeyA, Modifiers는 Shift로 나옵니다. Enter를 누르면 keyCode는 13, code는 Enter, location은 0입니다.

한계

keydown 이벤트만 기록하며 가장 최근에 누른 키 한 번의 값만 보여 줍니다. keyCode는 폐기된 속성이라 브라우저와 키보드 배열에 따라 다른 값이 나올 수 있습니다. key 값은 키보드 배열과 Shift 상태를 반영하므로 같은 물리 키도 다르게 나올 수 있습니다. Fn 키처럼 브라우저로 전달되지 않는 키는 보이지 않을 수 있습니다.

보안 주의

이 도구는 페이지 어디에서든 누른 키를 화면에 표시합니다. 비밀번호 입력란에 포커스가 있을 때 이 페이지를 열어 두면 입력한 문자가 화면에 그대로 드러날 수 있으니, 화면 공유 중에는 사용하지 마세요.

배경 지식

브라우저는 키를 누를 때 keydown과 keyup 이벤트를 보내며, 각 이벤트에는 key, code, keyCode, location 같은 값이 들어 있습니다. key는 입력된 문자나 기능 이름(Enter, ArrowUp)이고, code는 키보드에서 물리적인 위치의 이름(KeyA, Digit1)입니다. 같은 자리의 키라도 한글 자판이나 다른 배열에서는 key가 달라지므로, 단축키는 code 기준으로 정하는 편이 안정적입니다.

keyCode는 예전 이벤트 모델에서 쓰이던 숫자 코드로, 지금은 폐기되었지만 오래된 코드와 일부 라이브러리에서는 여전히 쓰입니다. location은 왼쪽 Shift와 오른쪽 Shift, 숫자패드의 키를 구분하는 값입니다. 이 값들을 함께 보면 단축키가 충돌하는 이유를 빠르게 찾을 수 있습니다. 이 도구는 이벤트의 수정 키 플래그를 모아 조합 문자열로 보여 줍니다.

자주 묻는 질문

Mac의 Command 키는 어떤 값으로 나오나요?

key 값은 Meta이고, Modifiers 칸에도 Meta로 표시됩니다. 단축키 코드에서 metaKey 플래그를 쓰면 Mac의 Command와 Windows의 Ctrl 차이를 한 번에 처리할 수 있습니다.

한글을 입력할 때 key 값이 이상하게 나오는 이유는 무엇인가요?

입력기(IME)가 글자를 조합하는 동안에는 key 값이 Process처럼 조합 상태를 나타내는 값으로 나올 수 있습니다. 입력이 확정된 뒤의 값과 다르므로, 한글 입력 문제를 확인할 때는 compositionstart 같은 조합 이벤트와 함께 살펴보세요.

keyCode 229는 무슨 뜻인가요?

브라우저가 키 입력을 입력기에 넘겼다는 뜻입니다. 실제 키 종류를 알 수 없으므로 이 값만으로는 단축키 판단을 할 수 없습니다. 한국어, 일본어, 중국어 입력 환경에서 자주 보입니다.