javascript - 특정 키 입력 제한 (event.keyCode)
컨텐츠 정보
- 6,950 조회
- 0 추천
- 목록
본문
출처 : https://caileb.tistory.com/158
특정 키 입력 제한(event.keyCode)
Keyboard Event Property
Web Page에서 키보드 이벤트를 받는 프로퍼티(Keyboard Event Property)인 event.keyCode를 사용해서 특정 키에 대한 입력을 제한할 수 있습니다.
event.keyCode
Keyboard Event 막기 Sample
아래 예제는 Web Page에서 키를 입력받는 때 발생하는 이벤트인 keydown에 대해 특정 키들을 막는 코드가 담긴 callback 함수를 등록시킨 것입니다. 숫자, 백스페이스, 시프트, 알트, 컨트롤을 페이지에서 입력받지 못하도록 하는 코드입니다.
<script type="text/javascript">
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented) {
return; // Should do nothing if the default action has been cancelled
}
var handled = false;
// 숫자(0 ~ 9) 입력 제한
if (event.keyCode >= 48 && event.keyCode <= 57)
handled = true;
// 백스페이스(backspace) 입력 제한
else if (event.keyCode == 8)
handled = true;
// 시프트(shift) 입력 제한
else if(event.keyCode == 16)
handled = true;
// 알트(alt) 입력 제한 (keycode 값인 18로 사용 가능)
else if(event.altKey)
handled = true;
// 컨트롤(ctrl) 입력 제한 (keyCode 값인 17로 사용 가능)
else if(event.ctrlKey)
handled = true;
if (handled) {
console.log(event.keyCode);
// Suppress "double action" if event handled
event.preventDefault();
}
}, true);
</script>
Key Code Table
event.keyCode에는 키보드의 각 키에 대한 특정 숫자가 부여되어 있습니다. 아래 테이블을 참조해서 사용하면 됩니다.
- 특수 키 모음
Backspace | 8 | Page Down | 34 | Right click | 93 | F10 | 121 |
Tab | 9 | End | 35 | F1 | 112 | F11 | 122 |
Enter | 13 | Home | 36 | F2 | 113 | F12 | 123 |
Shift | 16 | Arrow Left | 37 | F3 | 114 | Num Lock | 144 |
Ctrl | 17 | Arrow Up | 38 | F4 | 115 | Scoll Lock | 145 |
Alt | 18 | Arrow Right | 39 | F5 | 116 | ||
Pause/Break | 19 | Arrow Down | 40 | F6 | 117 | ||
Caps Lock | 20 | Insert | 45 | F7 | 118 | ||
Esc | 27 | Delete | 46 | F8 | 119 | ||
Page Up | 33 | Windows | 91 | F9 | 120 |
- 일반 키 모음
0 | 48 | a | 65 | k | 75 | u | 85 |
1 | 49 | b | 66 | l | 76 | v | 86 |
2 | 50 | c | 67 | m | 77 | w | 87 |
3 | 51 | d | 68 | n | 78 | x | 88 |
4 | 52 | e | 69 | o | 79 | y | 89 |
5 | 53 | f | 70 | p | 80 | z | 90 |
6 | 54 | g | 71 | q | 81 | ||
7 | 55 | h | 72 | r | 82 | ||
8 | 56 | i | 73 | s | 83 | ||
9 | 57 | j | 74 | t | 84 |
참고 사이트
(MDN) KeyboardEvent.keyCode
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
(w3cSchools) KeyboardEvent.keyCode
https://www.w3schools.com/jsref/event_key_keycode.asp
(MDN) KeyboardEvent.preventDefault
https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault
key code table
관련자료
-
링크
댓글 0
등록된 댓글이 없습니다.