728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/jquery.min.js"></script>
<style>
</style>
<script>
$(document).ready(function(){
$(document).on("keydown",keyEventFnc)
function keyEventFnc(e){ //e에 인풋정보가 담김
var 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)
console.log(direct)
}
}
})
</script>
<title>Document</title>
</head>
<body>
<input type="text" name="user_id" id="user_id">
<div id="a">
</div>
</body>
</html>
document에 keydown이 발생할때 keyEventFnc함수 작동
keyEventFnc(e) → e값에 인풋정보를 담음
e.keyCode로 자바스크립트 keyCode를 받아서 switch case문으로 direct에 값을 넣어줌
해당 값을 #user_id에 넣어줌
728x90
반응형
'HTML+CSS(복습)' 카테고리의 다른 글
| 2023-05-16(화) mouseover , mouseout (0) | 2023.05.17 |
|---|---|
| 2023-05-16(화) click , index (0) | 2023.05.17 |
| 2023-05-16(화) change , value(이메일) (0) | 2023.05.17 |
| 2023-05-16(화) focus , blur(로그인창) (0) | 2023.05.17 |
| 2023-05-16(화) scroll (0) | 2023.05.17 |