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

• 특수 키 모음

• 일반 키 모음

참고 사이트

(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