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
유쾌한 사람은 자기 일에만 몰두하는 사람이 아니다. 때론 자신의 일을 전부 제쳐놓고 타인의 문제에 전력을 쏟는 열정이 있는 사람이다. 타인에게 자신의 힘을 나누어주고 마음을 열어주는 것은 자신의 삶을 행복하게 만드는 방법이다.