CLASS/HTLML,CSS,JS

#10-2 / js중급 - 키보드 이벤트 핸들링

hingu 2024. 6. 11. 17:11

onkeypress

키보드 입력시 기존에 있는 값을 가져오는 형태

 

onkeyup

키보드 입력시 누르고 떼자마자 입력된 모든값을 가져오는 형태

 

onkeydown

키보드 입력시 누르자마자 직전값을 모두 가져오는 형태

오른쪽 숫자키,상단숫자키 keycode ascii번호가 다름 ( onkeypress는 동일 )

특수키 keycode ascii번호도 인식 ( onkeypress는 불가 )

=>새로고침방지,스크린샷방지,id입력시 spacebar 사용금지 등..에 사용

⚡ 키보드 이벤트 핸들링
 
<body>
	<input type="text" id="mid" onkeypress="key1(this.value)"><br>
	<input type="text" id="mid2" onkeyup="key2(this.value)"><br>
	<input type="text" id="mid3" onkeydown="key3(this.value)">
</body>
<script type="text/javascript">
	function key1(a){ //onkeypress
		var ascii = window.event.keyCode;
		if(ascii < 48 || ascii > 57){
			document.getElementById("mid").value="";
			//마지막에 누른 key값은 input에 남아있음 - 완전 초기화는 불가능
			alert("휴대폰 번호는 숫자만 입력 가능합니다."); 
		}
	}
	
	function key2(b){ //onkeyup
		console.log(b)
	}
	
	function key3(c){ //onkeydown
		var ascii = window.event.keyCode;
		if(ascii == 116){ //f5 막기
			alert("새로고침은 사용하실 수 없습니다");
			event.keyCode = 0;
			event.returnValue = false;
		}else if(ascii == 13){
			alert("enter키 작동금지!");
			return false;
		}	
	}
</script>