[jQuery] ESC(이스케이프) 누름 감지하기

오늘은 ESC(Escape)를 눌렀을때 이벤트를 발행시키기 위해

ESC를 눌럿을 때 감지하는 Script를 만들어 봅시다.

ESC를 감지하기 위해서는

브라우저에서 제공되는

KeyCode 또는 which속성을 사용해야 합니다.

현재 최신 브라우저에서는 KeyCode 보다는 which 속성을 지원하고 있습니다.

그래도 구 브라우저를 위해서 KeyCode도 사옹해 보도록 하죠.

저는 ESC감지를 어디에 사용하려 하냐~

레이어 팝업이 떳을때 

ESC 버튼을 누르면 닫히게 작업하려 합니다.

아래 코드를 보시죠

$(document).keydown(function(e){
    var code = e.keyCode || e.which;
 
    if (code == 27) {
        $('.레이어팝업 클래스').hide();
    }
});

해석하자면

document에서 키를 누르면 이벤트가 발생합니다.

code 변수는 키를 눌렀을때 키마다의 고유 키번호가 존재 합니다.

그것을 code 변수에 담는 것입니다.

ESC의 키번호는 27!!!

누른 키 값이 27면 레이어 팝업을 안보이게 처리합니다.

이것말고도 다른 키보드 키값을 확인하고 싶다면 

다음과 같이 작성합니다.

<input id="whichkey" value="키 입력">
<div id="log"></div>
 
<script>
$( "#whichkey" ).on( "keydown", function( event ) {
  $( "#log" ).html( event.type + ": " +  event.which );
});
</script>

이러면 html 화면으로 

키를 input에 누를때마다 키에 대한 값을 확인할 수 있습니다.

좋은 내용이면 공감을

기타 질문사항 또는 더 좋은 방향의 방법이 있다면 

댓글 부탁드립니다.