[21.10.06] exam05(02_jQueryEvent) - Key이벤트 확인(Key를 입력하거나 Key를 계속 눌렀을 때의 이벤트 발생)

JAVA_EE/JQuery

[21.10.06] exam05(02_jQueryEvent) - Key이벤트 확인(Key를 입력하거나 Key를 계속 눌렀을 때의 이벤트 발생)

luvforjunk 2021. 10. 7. 01:53

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>Key 이벤트 확인하기</h1>
<div id="input">
	<input type="text">
</div>
<h2>결과</h2>
<div id="result"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	var down_count = 0;
	var up_count = 0;
	
	$('#input > input[type="text"]').keydown(function(){ // key를 눌렀다 떼거나 누르고 있는 경우
		down_count++;
		$("#result").html("down_count: " + down_count + " / up_count: " + up_count);
	});
	
	$('#input > input[type="text"]').keyup(function(){ 
		up_count++;
		$("#result").html("down_count: " + down_count + " / up_count: " + up_count);
	});
	
});
</script>
</body>
</html>

728x90