키보드 이벤트 확인기

언제 사용하나요?

단축키 기능을 구현할 때 브라우저가 인식하는 정확한 key와 code 값을 확인하거나, 특수 키의 이벤트 속성을 파악해야 할 때 사용합니다.

사용 방법

• 도구 안의 입력 영역을 클릭해 포커스합니다.
• 확인하고 싶은 키를 누릅니다.
• key, code, keyCode, modifier 값이 즉시 표시됩니다.

입력값 안내

키보드 테스트 전용 텍스트 영역을 마우스로 클릭하여 포커스한 뒤, 확인하고 싶은 아무 키나 누릅니다.

계산·변환 기준

JavaScript의 `keydown` 이벤트 리스너를 DOM 요소에 부착하여, 이벤트 발생 시 전달되는 `KeyboardEvent` 객체로부터 `key`, `code`, `keyCode`, `ctrlKey`, `shiftKey` 등의 프로퍼티 속성 값을 실시간으로 읽어 화면에 표시합니다.

사용 예시

• 단축키 구현 - 브라우저가 인식하는 key와 code 값을 확인해 단축키를 구현합니다.
• 배포 전 빠른 점검 - 입력값과 생성 결과를 확인해 개발·운영 작업 전 오류 가능성을 줄입니다.
• 문서·리뷰 보조 - 정리된 결과를 복사해 개발 문서, 이슈, 코드 리뷰 코멘트에 바로 붙여넣습니다.

예시

• Enter 키 → key: "Enter", code: "Enter", keyCode: 13
• Ctrl+A → key: "a", code: "KeyA", ctrlKey: true

주의사항

• 이벤트 키코드는 브라우저·OS 환경마다 다를 수 있습니다. 특히 한국어 IME 조합 중 동작은 일반 입력과 다를 수 있습니다.
• 입력 이벤트 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

키보드 이벤트 정보 확인

키를 누르면 keyCode, key, code, which 등의 이벤트 속성값을 실시간으로 표시합니다. 특수키, 조합키(Ctrl+키), 기능키(F1~F12)도 확인할 수 있습니다.

개발 디버깅 활용

키 이벤트 리스너를 구현할 때 정확한 key 코드를 파악하기 위해 사용합니다. keyCode는 deprecated 예정이므로 key와 code 속성을 함께 확인하는 것을 권장합니다.

자주 묻는 질문

어디에서 이벤트를 감지하나요?

도구 안의 입력 영역에 포커스했을 때 keydown 이벤트를 표시합니다.

키 입력이 기록으로 남나요?

아니요. 키 이벤트는 화면에 표시만 되고 저장되거나 외부로 전송되지 않습니다.

조합 키도 확인할 수 있나요?

Ctrl·Shift·Alt·Meta 같은 수정 키와의 조합도 modifier 상태로 함께 표시됩니다.

key와 code는 어떻게 다른가요?

key는 입력된 문자값(예: a), code는 물리적 키 위치(예: KeyA)입니다. 키보드 레이아웃이 달라도 code는 동일합니다.

관련 도구

• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.
• JWT 디코더 - JWT의 header와 payload를 디코딩해 JSON과 주요 클레임을 확인합니다.
• 정규식 테스터 - 정규식 패턴을 입력해 텍스트에서 매칭 결과를 실시간으로 확인합니다.
• QR 코드 생성기 - 텍스트나 URL을 QR 코드로 변환하고 이미지로 다운로드합니다.