방향키 누를 시 값 출력

JQuery

방향키 누를 시 값 출력

청춘고양이 2022. 6. 17. 20:53

HTML

<body>
    <p>
        <input type="text" name="user_id" id="user-id">s
    </p>
</body>

JQuery

익명 함수를 사용하기에는 키를 누르는 각각의 경우를 생각해야 하므로 함수의 이름을 붙여서 사용. 지금의 경우에는 한 곳이지만 여러 곳에서 사용할 수도 있기 때문

      $(document).ready(function(){
            $(document).on("keydown",keyEventFnc)
            //key가 눌려지면, keyEventFnc 함수를 실행하겠다.
            function keyEventFnc(e){//e, event - 발생한 이벤트 객체정보가 넘어온다.
                //e.keyCode - 이벤트 객체 내부의 키코드 값
                switch(e.keyCode){
                    case 37: //LEFT
                        $("#user-id").val("LEFT");
                        break;
                    case 38: //TOP
                        $("#user-id").val("TOP");
                        break;
                    case 39: //RIGHT
                        $("#user-id").val("RIGHT");
                        break;
                    case 40: //BOTTOM
                        $("#user-id").val("BOTTOM");
                        break;    
                                        
                }
            }
        });

저작자표시 (새창열림)