<!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>
