Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

web sprit

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

스크립트/J-Query

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

커드만 2018. 12. 10. 11:09

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

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


ESC를 감지하기 위해서는

브라우저에서 제공되는

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

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

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


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

레이어 팝업이 떳을때 

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

아래 코드를 보시죠


1
2
3
4
5
6
7
$(document).keydown(function(e){
    var code = e.keyCode || e.which;
 
    if (code == 27) {
        $('.레이어팝업 클래스').hide();
    }
});
cs

해석하자면

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

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

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

ESC의 키번호는 27!!!

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


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

다음과 같이 작성합니다.

1
2
3
4
5
6
7
8
<input id="whichkey" value="키 입력">
<div id="log"></div>
 
<script>
$( "#whichkey" ).on( "keydown"functionevent ) {
  $( "#log" ).html( event.type + ": " +  event.which );
});
</script>
cs

이러면 html 화면으로 

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


좋은 내용이면 공감을

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

댓글 부탁드립니다. 






Comments