키보드 이벤트

code 값 목록

code는 표준에 고정된 값이라 자판 배열·운영체제와 무관하게 같습니다. 반면 숫자 keyCode는 환경에 따라 달라 표로 싣지 않았습니다. 직접 눌러서 확인하세요.

단축키를 만들 때 걸리는 것들

자주 묻는 질문

key와 code는 무엇이 다른가요?

code는 키의 자리(물리적 위치)이고 key는 실제로 찍히는 글자입니다. 한글 자판에서 ㅁ을 눌러도 code는 KeyA이고, Shift를 함께 누르면 key는 A가 되지만 code는 그대로 KeyA입니다. 게임의 WASD 이동처럼 자리가 중요하면 code를, 입력 내용이 중요하면 key를 쓰세요.

keyCode는 왜 쓰지 말라고 하나요?

표준에서 폐기된 값이기 때문입니다. 자판 배열과 브라우저에 따라 값이 달라 같은 키가 다른 숫자를 내는 경우가 있습니다. 지금도 동작하지만 새로 만드는 코드에서는 key나 code를 쓰는 것이 맞습니다. 이 도구가 keyCode를 함께 보여 주는 이유는 오래된 코드를 고칠 때 그 값이 필요해서입니다.

한글을 입력하면 keyCode가 229로 나옵니다.

정상입니다. 한글·일본어·중국어처럼 글자를 조합해 만드는 입력기(IME)가 처리 중이라는 신호입니다. 이 상태에서는 어떤 키를 눌렀는지 keydown으로 알 수 없습니다. 조합이 끝난 글자가 필요하면 keydown 대신 input 이벤트나 compositionend를 쓰세요.

어떤 키는 눌러도 반응이 없습니다.

F11(전체화면)·F12(개발자 도구)·Ctrl+W처럼 브라우저나 운영체제가 먼저 가져가는 키가 있습니다. 웹페이지에는 이벤트가 오지 않으므로 웹에서 그런 단축키를 덮어쓰는 것은 불가능합니다. 단축키를 만들 때는 이런 조합을 피해야 합니다.

왼쪽 Shift와 오른쪽 Shift를 구분할 수 있나요?

구분할 수 있습니다. code가 ShiftLeft와 ShiftRight로 다르게 나옵니다. Ctrl·Alt·Meta도 마찬가지입니다. 다만 key는 둘 다 Shift로 같으므로 좌우를 구분하려면 code나 location 값을 봐야 합니다.

함께 쓰면 좋은 도구