WEB.JQUERY

chapter05 : jQuery_keyboard_evnet

GAWON 2023. 5. 22. 09:20 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	/*
		키보드 이벤트
		keydown		키보드에서 키를 누르면 발생
		keypress	키보드에서 키를 누르면 발생(일부 키 적용x) alt, ctrl, shift, esc 등
		keyup		키보드에서 누르고 있던 키를 놓으면 발생
	*/
	$(function(){
		// keydown
		$("#input1").keydown(function(){
			$("#input1").css("background-color", "yellow")
		});
		// keyup
		$("#input1").keyup(function(){
			$("#input1").css("background-color", "pink")
		});
		
		// keypress
		var i = $("span").text();		// text() : content 영역의 데이터
		$("#input2").keypress(function(){
			$("span").text(++i);
		});
		
	});
</script>
</head>
<body>
	이름을 입력하세요 : <input type="text" id="input1">
	<br/>
	<br/>
	이름을 입력하세요 : <input type="text" id="input2">
	<p style="margin: 0">
		keypress count : <span>0</span>
	</p>
</body>
</html>