keydown() / keyup() / keypress() 이벤트 메소드
keydown(), keypress() 는 선택한 요소에서 키보드 자판을 눌렀을때 이벤트 발생
keydown()은 모든 키(한글 키 제외)에 대해서 발생
keypress()는 기능키등에 대해서는 이벤트 발생을 하지 않음
keyup()은 자판의 키를 눌렀다 키에서 손을 떼면 이벤트 발생
기본형
1) keydown 이벤트 등록
$("이벤트 대상 선택").keydown(function () { 자바스크립트 코
드; });
$("이벤트 대상 선택").on("keydown", function () {자바스크립트
코드; });
2) keydown 이벤트 강제 발생
$("이벤트 대상 선택").keydown();
1) keyup 이벤트 등록
$("이벤트 대상 선택").keyup(function () { 자바스크립트 코드;
});
$("이벤트 대상 선택").on("keyup", function () {자바스크립트
코드; });
2) keyup 이벤트 강제 발생
$("이벤트 대상 선택").keyup();
1) keypress 이벤트 등록
$("이벤트 대상 선택").keypress(function () { 자바스크립트 코
드; });
$("이벤트 대상 선택").on("keypress", function () {자바스크립
트 코드; });
2) keypress 이벤트 강제 발생
$("이벤트 대상 선택").keypress();
<!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>
$(function() {
$(document).on('keydown', KeyEventFnc);
function KeyEventFnc(e) {
let direct = '';
switch(e.keyCode){
case 37:
direct = 'LEFT';
break;
case 38:
direct = 'TOP';
break;
case 39:
direct = 'RIGHT';
break;
case 40:
direct = 'BOTTOM';
break;
}
if(direct) {
$('#user_id').val(direct);
}
}
});
</script>
</head>
<body>
<p><input type="text" name="user_id" id="user_id" value=""></p>
</body>
</html>
