[Javascript] 키보드 입력 키값
- 자바스크립트 keyboard event key value
KeyboardEvent
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
예제
document.addEventListener("keydown", (event) => {
const keyName = event.key;
if (keyName === "Control") {
console.log(`Ctrl 키 눌림`);
return;
}
if (event.ctrlKey) {
// Ctrl 키와 다른 키의 조합
console.log(`Ctrl 키 + ${keyName}`);
} else {
console.log(`키 = ${keyName}`);
}
},
false
);
document.addEventListener("keyup", (event) => {
const keyName = event.key;
if (keyName === "Control") {
console.log("Ctrl 키 해제");
}
},
false
);
//-------------------------------------
* 보조키 눌렸는지 여부 판정
altKey - 좌
ctrlKey - 좌
shiftKey - 좌, 우
//-------------------------------------
* KeyboardEvent.code
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
- 코드값
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
- 멀티미디어 키값 없음
//-------------------------------------
* KeyboardEvent.key
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
- 키값
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
- 멀티미디어 키값 있음
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values#multimedia_keys
MediaStop , MediaPlayPause , MediaTrackPrevious , MediaTrackNext
AudioVolumeMute , AudioVolumeDown , AudioVolumeUp
//
KeyboardEvent | ||
code | key | |
ControlLeft | Control | |
ControlRight | HanjaMode | |
AltLeft | Alt | |
AltRight | HangulMode | |
ShiftLeft | Shift | |
ShiftRight | Shift | |
Enter | Enter | |
NumpadEnter | Enter | |
Digit1 | 1 | |
KeyA | a | |
Tab | Tab | |
F1 | F1 | |
Escape | Escape | |
Backslash | \ | |
Slash | / | |
Numpad0 | Insert or 0 | |
멀티미디어 키 | 없음 | MediaStop , MediaPlayPause , MediaTrackPrevious , MediaTrackNext |
없음 | AudioVolumeMute , AudioVolumeDown , AudioVolumeUp |
//
//-------------------------------------
* 삭제 예정 (Deprecated)
keypress 이벤트
KeyboardEvent.keyCode
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
KeyboardEvent.charCode - 모두 0
//-----------------------------------------------------------------------------
< 참고 >
JavaScript Keycode List – Keypress Event Key Codes for Enter, Space, Backspace, and More
https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/