keyboard 이벤트

"> 03-03_keyboard
keyboard 이벤트

"> 03-03_keyboard
keyboard 이벤트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03-03_keyboard</title>
<script src="<https://code.jquery.com/jquery-3.7.1.js>"></script>
<style type="text/css">
* { margin: 0; padding: 0;}
textarea {
	border: 1px solid gray;
	width: 300px;
	height: 200px;
}
textarea .on{
	background-color:bisque;
	color: #333333;
}
#display {
	border: 1px solid black;
	width: 300px;
	height: 200px;
	overflow: auto;
	word-break: break-all;
}

</style>
</head>
<body>
	<h1>keyboard 이벤트</h1>
	<br/>
	<textarea rows="" cols=""></textarea>
	<div id="display"></div>
	<!-- javascript -->
	<script type="text/javascript">
		$(document).ready(function(){
			$("textarea").keydown(function(){
				$(this).addClass("on");
			}).keyup(function(){
				$("#display").text($(this).val()); // $(this).val() : 요소의 값 가져오기
			});
		});
	</script>
</body>
</html>