JavaScript KeyCode 찾기
키를 누르면 해당 키의 keyCode, key, code, which 값을 확인합니다
키보드 입력
여기를 클릭하고 키를 누르세요
키보드 이벤트는 이 영역 안에서만 캡처됩니다. Tab 키는 키를 기록한 뒤 다음 컨트롤로 포커스를 이동합니다.
전체 키보드 이벤트를 확인하려면 물리 키보드를 사용하세요. 모바일 키보드는 일부 속성을 제공하지 않을 수 있습니다.
최근 누른 키
최근에 누른 키 10개가 여기에 표시됩니다.
키보드 이벤트 세부 정보
event.keyevent.codeevent.keyCode사용 중단됨event.which사용 중단됨event.locationevent.repeat수정자 키
캡처 영역에 포커스를 두면 키보드 이벤트를 확인할 수 있습니다.
자바스크립트 Keycode 찾기 소개
이 JavaScript KeyCode 찾기는 아무 키나 누르면 모든 키보드 이벤트 속성을 바로 보여 주는 무료 대화형 개발자 도구입니다. 키보드 단축키, 게임 조작, 접근성 내비게이션을 만들 때 event.key, event.code, event.keyCode, event.which의 정확한 값을 알아 두는 것은 브라우저 간 호환되는 안정적인 JavaScript를 작성하는 데 필수입니다.
최신 웹 애플리케이션은 폼 검증부터 실시간 협업 도구까지 키보드 이벤트 처리에 크게 의존합니다. 이 키 코드 조회 도구는 키를 누르는 순간 물리 키 코드, 논리 키 값, 위치 식별자, 모든 보조 키 상태(Shift, Ctrl, Alt, Meta)를 브라우저에서 별도 설정 없이 바로 표시하므로 추측할 필요가 없습니다.
정적인 키 코드 참조표와 달리 이 실시간 JavaScript 키 이벤트 테스터는 실제 브라우저 이벤트를 수집하므로 운영체제와 키보드 배열이 달라도 동작을 확인할 수 있습니다. 또한 더 이상 권장되지 않는 속성을 분명히 표시해 현재 W3C Keyboard Event 표준에 맞는 미래 지향적인 코드를 작성하도록 돕습니다.
주요 기능
- 키를 누르면 다음 이벤트 속성의 값을 실시간으로 표시합니다. 표시 항목:
event.key,event.code,event.keyCode,event.which, 그리고event.location - Shift, Ctrl, Alt, Meta 상태를 보여 주는 시각적 보조 키 표시기
- keyCode, which 같은 레거시 속성에 사용 중단 배지 표시
- 개별 이벤트 속성 값을 한 번의 클릭으로 복사
- 모든 키 데이터를 서식이 적용된 JSON 객체로 내보내기
- 최근 키 입력 10개를 비교할 수 있는 기록 표
- 왼쪽, 오른쪽, 숫자 키패드 키 위치를 자동으로 구분
- 직관적으로 알아볼 수 있는 시각적 키보드 키 렌더링
- 기능 키, 방향키, 특수 문자를 포함한 모든 키 지원
- 다크 모드를 지원하는 완전 반응형 디자인
JavaScript KeyCode 찾기 사용 방법
- 입력 영역 선택: 도구 상단의 점선 키 입력 영역 안을 클릭하면 키보드 감지가 활성화됩니다.
- 아무 키나 누르기: 키보드에서 아무 키나 누르면 아래 속성 표에 모든 이벤트 속성이 바로 나타납니다.
- 보조 키 상태 확인: Shift, Ctrl, Alt, Meta 표시기를 보고 키를 누르는 동안 어떤 보조 키가 눌려 있었는지 확인합니다.
- 값 복사: 속성 옆의 복사 아이콘을 클릭하면 해당 값이 복사되고, "Copy All as JSON" 버튼을 사용하면 모든 속성을 한 번에 내보낼 수 있습니다.
- 키 비교: 여러 키를 차례로 누른 뒤 아래 기록 표로 스크롤하면 각 코드를 나란히 비교할 수 있습니다.
- 초기화 후 반복: Clear 버튼을 누르면 모든 데이터가 초기화되어 새 테스트를 시작할 수 있습니다.
활용 사례
- 키보드 단축키 개발: 웹 애플리케이션에 맞춤 단축키를 구현할 때 필요한 key 및 code 값을 확인합니다.
- 게임 조작: event.code를 확인해 키보드 배열과 무관한 키 바인딩으로 물리 키를 게임 동작에 매핑합니다.
- 접근성 테스트: 키보드 내비게이션이 올바르게 작동하고 모든 상호작용 요소가 예상한 키에 반응하는지 확인합니다.
- 레거시 코드 마이그레이션: 오래된 프로젝트에서 사용하는 사용 중단된 event.keyCode 값에 대응하는 최신 event.key 값을 찾습니다.
- 브라우저 간 디버깅: Chrome, Firefox, Safari, Edge에서 키 이벤트가 일관된 값을 만드는지 확인합니다.
- 입력 폼 검증: 텍스트 필드에서 특정 문자를 허용하거나 차단하기 위한 정확한 키 값을 알아냅니다.
- 튜토리얼 및 문서 작성: 개발자 가이드와 참고 자료에 넣을 정확한 키 코드 데이터를 빠르게 조회합니다.
- 숫자 키패드와 메인 키보드 구분: location 속성을 사용해 숫자 키패드 키와 일반 숫자 키를 구분합니다.
자주 묻는 질문
event.key와 event.code의 차이는 무엇인가요?
event.key는 키의 논리적 값을 반환하며(예: Shift 여부에 따라 "a" 또는 "A"), event.code는 보조 키나 키보드 배열과 관계없이 키보드의 물리적 키를 반환합니다(예: "KeyA"). 문자 입력에는 event.key를, 위치 기반 단축키에는 event.code를 사용하세요.
event.keyCode는 지금도 사용해도 안전한가요?
event.keyCode는 W3C에서 공식적으로 사용 중단되었으며 브라우저마다 동작이 다를 수 있습니다. 새 프로젝트에서는 event.key 또는 event.code를 사용하세요. 다만 많은 레거시 코드가 아직 keyCode에 의존하므로, 이 도구는 하위 호환 참고용으로 keyCode도 표시합니다.
location 필드는 왜 중요한가요?
이 event.location 속성은 왼쪽 Shift와 오른쪽 Shift, 숫자 행과 숫자 키패드처럼 키보드의 여러 위치에 있는 키를 구분합니다. 중복된 키를 구분해야 하는 애플리케이션에서는 매우 중요합니다.
이 도구는 무료인가요?
네, JavaScript KeyCode 찾기는 가입, 사용 제한, 숨겨진 비용 없이 완전히 무료입니다. 개발과 테스트에 필요한 만큼 얼마든지 사용할 수 있습니다.
내 데이터는 안전한가요?
물론입니다. 모든 키 감지는 기본 JavaScript 키보드 이벤트를 사용해 브라우저 안에서만 이루어집니다. 키 입력이나 이벤트 데이터는 서버로 전송되지 않으며, 입력 내용은 사용자의 기기에서만 안전하게 유지됩니다.
모바일 기기에서도 작동하나요?
이 도구는 물리 키보드에서 가장 잘 작동합니다. 모바일 기기의 화면 키보드는 모든 이벤트 속성을 일관되게 발생시키지 않을 수 있습니다. 정확한 결과를 얻으려면 데스크톱이나 노트북을 사용하거나 모바일 기기에 외부 키보드를 연결하세요.
팁과 모범 사례
- 문자 입력에는 event.key 사용: 키보드 배열, 언어, 보조 키 상태를 자동으로 반영합니다.
- 게임 조작에는 event.code 사용: 사용자의 키보드 배열(QWERTY, AZERTY, Dvorak)과 관계없이 물리 키 위치가 일정하게 유지됩니다.
- 보조 키 조합은 항상 테스트: Ctrl+Shift+Key 또는 Alt+Key를 눌러 단축키 리스너가 올바른 조합을 인식하는지 확인하세요.
- 기록 표에서 패턴 확인: 여러 키 입력을 비교하면 불일치를 발견하거나 필요한 코드를 더 빨리 찾을 수 있습니다.
- 문서화를 위한 JSON 내보내기: "Copy All as JSON" 기능으로 정확한 키 데이터를 코드 주석이나 개발자 문서에 바로 붙여 넣으세요.
- 여러 브라우저에서 테스트: 특히 특수 키는 브라우저마다 키 이벤트 값이 다를 수 있습니다. 대상 브라우저를 반드시 확인하세요.