HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>keydown, keyup 이벤트 구분하기</title>
<link rel="stylesheet" href="css/keydown_keyup.css">
<script type="text/javascript" src="../../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/keydown_keyup.js"></script>
</head>
<body>
<form action="">
텍스트1(keydown) : <input type="text" name="text1" id="text1" /><br/>
텍스트2(keydown) : <input type="text" name="text2" id="text2" /><br/>
<hr>
텍스트3(keyup) : <input type="text" name="text3" id="text3" /><br/>
텍스트4(keyup) : <input type="text" name="text4" id="text4" /><br/>
</form>
</body>
</html>
JS
$(document).ready(function() {
$("input:text[id='text1']").bind("keydown", function(e){
$("input:text[id='text2']").val( $(e.target).val() );
console.log(e.keyCode);
});
$("input:text[id='text3']").bind("keyup", function(e){
$("input:text[id='text4']").val( $(e.target).val() );
console.log(e.keyCode);
});
});
CSS
@charset "UTF-8";
hr {
border: solid 2px orange;
height: 10px;
background-color: orange;
margin: 50px 0;
}
정리
- jQueryStudy -> 01_eventHandling -> chap13_keydown_keyup -> keydown_keyup.html, keydown_keyup.js, keydown_keyup.css
