키보드 이벤트
keydown() : 키보드 누를 때 이벤트 발생.
keypress() : keydown() 이벤트와 유사하지만 alt, ctrl, shift, esc 와 같은 특수키는 이벤트 발생이 안됨.
keyup() : 키보드를 떼어쓸 때 이벤트 발생
$(this) 선택자
이벤트가 발생한 요소를 선택해서 반환
index() 인덱스 반환 메서드
이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환
기본형
$("이벤트 대상 선택").on("이벤트 종류", function () {
$("이벤트 대상 선택").index(this);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
// $(document).ready(function() {
// $('textarea').keydown(function() {
// $(this).addClass('on');
// }).keyup(function() {
// $('#display').text($(this).val());
// });
// });
//.on 을 사용한 코드
$(document).ready(function() {
$('textarea').on (
{
keydown: function() {
$(this).addClass('on');
},
keyup: function() {
$('#display').text($(this).val());
}
}
);
});
</script>
<style>
body { font-size: 12px; }
textarea { width: 300px; height: 200px; border: 1px solid #000; }
textarea.on { background: #ff6600; color: #fff; }
#display { width: 300px; height:100px; word-break: break-all; border: 1px solid #000; overflow: auto; }
</style>
</head>
<body>
<textarea></textarea>
<div id="display"></div>
</body>
</html>
