특정 키 입력 제한(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

http://www.foreui.com/articles/Key_Code_Table.htm