키보드 키 코드 확인

키보드 키 코드 확인 사용법

웹 페이지에서 키보드 입력을 다루려면 브라우저가 키를 누를 때 보내 주는 이벤트의 값을 알아야 합니다. 엔터로 검색을 실행하거나, 화살표로 목록을 옮기거나, Ctrl+S 로 저장하는 기능을 만들 때 "이 키는 값이 뭐지?"를 확인하는 도구입니다. 키를 누르면 key, code, keyCode 와 조합 키 상태를 바로 보여 주고, 누른 키를 표로 기록합니다.

쓰는 순서

1. 위쪽의 큰 칸을 누르거나 탭 키로 초점을 옮깁니다. 테두리 색이 바뀌면 준비된 것입니다.
2. 아무 키나 누릅니다. 큰 글씨로 조합(예: Ctrl + S)이 나오고 아래 네 칸에 key, code, keyCode, 위치가 나옵니다.
3. 이 키를 알아보는 자바스크립트 조건문 칸에 바로 붙여 넣을 수 있는 if 문이 만들어집니다. 조건문 복사로 가져갑니다.
4. 누른 키는 아래 표에 쌓입니다. 단축키 설계를 문서로 남기려면 기록을 CSV로 저장하세요.

휴대폰에서는 큰 칸을 눌러도 키보드가 올라오지 않으므로 그 아래 입력 칸을 눌러 화면 키보드를 띄웁니다. 다만 화면 키보드는 대부분의 키를 구분해 주지 않습니다(아래 한계 참고).

key, code, keyCode 의 차이

keyCode 는 표준에서 폐기 예정이고 브라우저와 자판에 따라 값이 다른 키도 있지만 아직 많은 코드에 남아 있어 함께 보여 줍니다. 자주 쓰는 값은 엔터 13, ESC 27, 스페이스 32, 탭 9, 백스페이스 8, 화살표 왼쪽부터 37, 38, 39, 40, 영문 A~Z 65~90, 숫자 0~9 48~57, F1~F12 112~123 입니다.

조합 키와 조건문

Ctrl, Shift, Alt, Meta(윈도우 키, 맥의 Command)를 함께 누르면 조합 키 줄에 표시되고 조건문에도 e.ctrlKey 같은 조건이 붙습니다. Ctrl+S 를 누르면 다음과 같은 조건문이 나옵니다.

if (e.ctrlKey && e.code === 'KeyS') { /* … */ }

글자 키에 Ctrl 이나 Alt 를 함께 누를 때는 key 대신 code 를 씁니다. 한글 상태이거나 다른 자판 배열이면 key 값이 달라지지만 code 는 위치라서 변하지 않기 때문입니다. 반대로 엔터, ESC, 화살표처럼 이름이 있는 키는 key 로 비교합니다. 맥 사용자를 함께 고려하려면 e.ctrlKey 자리에 (e.ctrlKey || e.metaKey) 를 쓰는 것이 보통입니다.

한글 입력과 keyCode 229

한글 상태에서 글자 키를 누르면 key 가 Process, keyCode 가 229 로 나옵니다. 브라우저가 "입력기가 글자를 조합하는 중"이라는 뜻으로 보내는 값입니다. 이때 code 는 KeyA 처럼 실제 위치를 그대로 알려 줍니다. 한글로 검색어를 치고 엔터를 눌렀을 때 검색이 두 번 실행되는 흔한 버그는, 조합을 끝내는 엔터와 실제 엔터가 모두 keydown 으로 들어오는데 이를 구분하지 않아서 생깁니다. 이벤트의 isComposing 이 true 이거나 keyCode 가 229 이면 무시해야 하며, 이 도구는 그 상태를 비고 칸에 "글자 조합 중"으로 표시합니다. 한/영 키는 key 가 HangulMode, 한자 키는 HanjaMode 로 나옵니다.

옵션

• 기본 동작 막기: 켜 두면 큰 칸에 초점이 있을 때 탭, 스페이스, F5, 백스페이스 같은 키가 페이지를 움직이거나 새로 고치지 않습니다. 칸에서 나가려면 Shift+Tab 을 누르거나 다른 곳을 클릭합니다. Ctrl+W, Ctrl+T, Alt+F4, 윈도우 키처럼 브라우저나 운영체제가 먼저 가져가는 조합은 막을 수 없습니다.
• 뗄 때(keyup)도 기록: 키를 뗄 때의 이벤트도 표에 남깁니다. 누름과 뗌 사이에 다른 키가 끼는 순서를 볼 때 씁니다.
• 누르고 있을 때 반복 입력도 기록: 키를 누르고 있으면 운영체제가 같은 keydown 을 반복해서 보냅니다(repeat 가 true). 기본으로는 첫 번째만 기록합니다.

위치(location) 값

Shift, Ctrl, Alt 는 왼쪽과 오른쪽에 하나씩 있고 엔터와 숫자는 숫자 키패드에도 있습니다. key 는 같아도 location 이 0(일반), 1(왼쪽), 2(오른쪽), 3(숫자 키패드)으로 다르고 code 도 ShiftLeft, ShiftRight, NumpadEnter 처럼 갈립니다. 숫자 키패드의 숫자는 Num Lock 이 꺼져 있으면 화살표나 Home 으로 들어오며 비고 칸에 Num Lock 꺼짐이라고 알려 줍니다.

한계

• 휴대폰과 태블릿의 화면 키보드는 대부분의 키를 key Unidentified, keyCode 229 로 보냅니다. 엔터와 백스페이스 정도만 구분됩니다. 모바일에서 글자 입력을 처리하려면 키 이벤트가 아니라 input 이벤트를 써야 합니다.
• Print Screen, 미디어 키, 일부 노트북의 Fn 조합은 브라우저까지 전달되지 않을 수 있습니다.
• 기록은 이 화면에만 남고 페이지를 닫으면 사라집니다. 어디로도 전송되지 않지만 비밀번호를 쳐 보지는 마세요.