[JavaScript/JQuery]
JQuery 제이쿼리 키입력 감지

2020. 4. 12. 02:53


웹페이지를 개발하다보면 때때로 사용자가 입력하는 키를 가져와야할 상황이 생긴다.

그럴때는 아래 Jquery 코드를 이용하면 손쉽게 사용자가 누른 키를 감지할 수 있다.

$(document).keyup(function(e){
                if (e.keyCode == 27){
                    console.log("ESC press");
                }
               	else{
                	console.log(e.keyCode);
                }
            });

위 코드는 사용자가 ESC key를 눌렀다가 떼는 순간 Browser의 Console에 "ESC press"라는 로그를 남긴다.

사용자가 ESC, 즉 27번 키코드를 누르지 않고 다른 키를 눌렀을때역시 눌렀다 뗀 키의 keyCode를 콘솔에 로그로 남긴다.

여기서 유의할점은 해당 제이쿼리 함수는 Key를 눌렀다가 떼는 시점에서 작동한다. 따라서 꾹 누르고있거나 눌렀다가 떼지 않으면 작동하지 않는다는점이다.

만약 누르자마자 감지하거나, 꾹 누르고 있는것을 감지하고싶을때는 keyup 메소드가 아닌 keydown메소드를 사용하면 된다.

참고로 해당 함수가 실행되었을때 특정 동작을 시키기 위해서는 위 코드의 3번째, 6번째 라인인 console.log 함수를 제거하고 그자리에 동작시킬 기능을 작성하면 된다.

'JavaScript > JQuery' 카테고리의 다른 글

JQuery 제이쿼리 키입력 감지  (0) 2020.04.12
제이쿼리 원 화폐 환전 가격 계산 및 출력  (0) 2020.03.29