Html & Script

javascript - 특정 키 입력 제한 (event.keyCode)

페이지 정보

본문

출처 : ​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에는 키보드의 각 키에 대한 특정 숫자가 부여되어 있습니다. 아래 테이블을 참조해서 사용하면 됩니다.

  • 특수 키 모음
Backspace8Page Down34Right click93F10121
Tab9End35F1112F11122
Enter13Home36F2113F12123
Shift16Arrow Left37F3114Num Lock144
Ctrl17Arrow Up38F4115Scoll Lock145
Alt18Arrow Right39F5116  
Pause/Break19Arrow Down40F6117  
Caps Lock20Insert45F7118  
Esc27Delete46F8119  
Page Up33Windows91F9120  
  • 일반 키 모음
048a65k75u85
149b66l76v86
250c67m77w87
351d68n78x88
452e69o79y89
553f70p80z90
654g71q81  
755h72r82  
856i73s83  
957j74t84  

 

 

참고 사이트

(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

관련자료

등록된 댓글이 없습니다.
Today's proverb
나를 힘들게 하는 사람이 나를 가르치는 사람이다.