키보드 이벤트 코드 - JavaScript 키 이벤트 뷰어 온라인
아무 키나 눌러 JavaScript 키보드 이벤트 속성을 실시간으로 확인하세요. event.key, event.code, keyCode, 수정자 키 상태 등을 조회합니다 — 100% 클라이언트 사이드, 서버로 데이터 전송 없음.
자주 묻는 질문
키보드 이벤트 코드 뷰어란 무엇인가요?
키보드 이벤트 코드 뷰어는 키보드의 아무 키나 누르면 JavaScript KeyboardEvent의 모든 속성을 표시하는 온라인 도구입니다. event.key(문자 또는 키 이름), event.code(물리적 키 식별자), event.keyCode(숫자 코드), 수정자 키 상태 등의 값을 보여줍니다. 개발자들이 웹 애플리케이션에서 키보드 인터랙션, 게임, 접근성 기능, 폼 유효성 검사를 구현할 때 정확한 이벤트 속성 값을 빠르게 조회하는 데 사용합니다.
이 키보드 이벤트 코드 도구는 어떻게 사용하나요?
페이지 상단의 캡처 영역을 클릭한 후 키보드의 아무 키나 누르세요. 도구가 해당 키 입력에 대한 key, code, keyCode, which, location, 수정자 키 상태를 포함한 모든 이벤트 속성을 즉시 표시합니다. 탭을 사용하여 keydown, keyup, keypress 이벤트 유형 간 전환할 수 있습니다. 복사 버튼으로 개별 값이나 전체 이벤트 데이터를 JSON으로 복사할 수 있습니다. 아래의 이벤트 히스토리 로그에서 최근 키 입력을 비교할 수 있습니다.
데이터는 안전한가요? 키 입력이 기록되나요?
모든 키보드 이벤트 캡처는 100% 브라우저에서 수행됩니다. 키 입력, 이벤트 데이터 또는 기타 정보가 서버로 전송되지 않습니다. 이 도구는 외부 서비스 호출 없이 네이티브 브라우저 KeyboardEvent API를 사용합니다. 키 입력은 히스토리 로그를 위해 브라우저 메모리에만 임시 저장되며 페이지를 닫으면 삭제됩니다. 보안에 민감한 환경에서도 안전하게 사용할 수 있습니다.
event.key와 event.code의 차이점은 무엇인가요?
event.key는 키보드 레이아웃과 수정자 키에 따라 달라지는 논리적 키 값을 나타냅니다. 예를 들어 'A' 키를 누르면 보통 key: 'a'이고 Shift를 누른 상태에서는 key: 'A'입니다. event.code는 레이아웃이나 수정자에 관계없이 키보드의 물리적 키 위치를 나타냅니다. 같은 물리적 키는 Shift를 누르든, QWERTY든 AZERTY든 항상 code: 'KeyA'를 반환합니다. 텍스트 입력 처리에는 event.key를, 게임 컨트롤이나 레이아웃 독립적 동작에는 event.code를 사용하세요.
keyCode, which, charCode가 왜 지원 중단(deprecated)되었나요?
이 속성들은 브라우저와 키보드 레이아웃 간에 일관성이 없기 때문에 지원 중단되었습니다. event.keyCode는 운영체제에 따라 같은 키에 다른 숫자 값을 반환하고, event.charCode는 keypress 이벤트에서만 사용 가능합니다(keypress 자체도 지원 중단). 현대적 대체 속성은 event.key(문자 값)와 event.code(물리적 키)입니다. 모든 최신 브라우저가 이 새로운 속성을 지원하며 플랫폼 간 일관되고 예측 가능한 값을 제공합니다.
event.location은 무엇을 알려주나요?
event.location은 키가 키보드의 어디에 위치하는지 나타냅니다. 숫자를 반환합니다: 대부분의 키는 0(Standard), 왼쪽 Shift나 왼쪽 Ctrl 같은 왼쪽 수정자 키는 1(Left), 오른쪽 수정자는 2(Right), 숫자 키패드의 키는 3(Numpad)입니다. 왼쪽과 오른쪽 Shift 키를 구분하거나 메인 Enter 키와 넘패드 Enter 키를 구분해야 할 때 유용합니다.
keydown과 keyup 이벤트의 차이점은 무엇인가요?
keydown은 키를 누르는 순간 발생하며 키를 누르고 있으면 반복적으로 발생합니다(event.repeat이 true). keyup은 키를 놓을 때 한 번 발생합니다. 지원 중단된 keypress 이벤트는 keydown과 keyup 사이에 발생하지만 문자 값을 생성하는 키에서만 동작합니다(Shift, Ctrl, 화살표 키 등에서는 발생하지 않음). 대부분의 경우 keydown이 권장되는 이벤트입니다.
코드 예제
// Keyboard Event Handling in JavaScript
// Basic keydown event listener
document.addEventListener('keydown', (event) => {
console.log('key:', event.key); // "a", "Enter", "Shift"
console.log('code:', event.code); // "KeyA", "Enter", "ShiftLeft"
console.log('keyCode:', event.keyCode); // 65, 13, 16 (deprecated)
console.log('location:', event.location); // 0, 0, 1
// Modifier key states
console.log('shiftKey:', event.shiftKey);
console.log('ctrlKey:', event.ctrlKey);
console.log('altKey:', event.altKey);
console.log('metaKey:', event.metaKey);
console.log('repeat:', event.repeat);
});
// Using event.code for layout-independent controls (e.g., WASD)
document.addEventListener('keydown', (event) => {
switch (event.code) {
case 'KeyW': moveForward(); break;
case 'KeyA': moveLeft(); break;
case 'KeyS': moveBackward(); break;
case 'KeyD': moveRight(); break;
case 'Space': jump(); break;
}
});
// Detecting modifier combinations
document.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
saveDocument();
}
if (event.metaKey && event.key === 'k') {
event.preventDefault();
openCommandPalette();
}
});
// Extracting full event data as an object
function extractKeyEventData(event) {
return {
type: event.type,
key: event.key,
code: event.code,
keyCode: event.keyCode,
which: event.which,
charCode: event.charCode,
location: event.location,
repeat: event.repeat,
isComposing: event.isComposing,
shiftKey: event.shiftKey,
ctrlKey: event.ctrlKey,
altKey: event.altKey,
metaKey: event.metaKey,
};
}
document.addEventListener('keydown', (event) => {
const data = extractKeyEventData(event);
console.log(JSON.stringify(data, null, 2));
});