[JQUERY] 캡처 키를 누릅니다 (또는를 keyDown) DIV 요소에 대한 이벤트

캡처 키를 누릅니다 (또는를 keyDown) DIV 요소에 대한 이벤트

해결법

1. ---

   1.(1) tabindex 속성을 설정합니다 :

   (1) tabindex 속성을 설정합니다 :

   <div id="mydiv" tabindex="0" />
   

   를 keyDown (2) 귀속 :

    $('#mydiv').on('keydown', function(event) {
       //console.log(event.keyCode);
       switch(event.keyCode){
          //....your actions for the keys .....
       }
    });
   

   시작에 포커스를 설정하려면 :

   $(function() {
      $('#mydiv').focus();
   });
   

   제거하려면 - 당신이 그것을 좋아하지 않는 경우에 - 사업부 초점 테두리, 세트 개요 : 없음을 CSS에.

   더 키 코드 가능성을 키 코드의 표를 참조하십시오.

   모든 코드는 jQuery를 사용하는 가정.

2. ---

   2.의 tabindex HTML 속성은 요소가 집중 될 수있는 경우 표시하고, 경우 /가 (일반적으로 탭 키) 순차적 키보드 탐색에 참여 곳. 전체 참조 MDN 웹 문서를 참조하십시오.

   의 tabindex HTML 속성은 요소가 집중 될 수있는 경우 표시하고, 경우 /가 (일반적으로 탭 키) 순차적 키보드 탐색에 참여 곳. 전체 참조 MDN 웹 문서를 참조하십시오.

   $ ( "#division") .keydown (기능 (EVT) { EVT = EVT || window.event를; 을 console.log ( "를 keyDown :"+ evt.keyCode); }); #division { 폭 : 90 픽셀; 높이 : 30 픽셀; 배경 : lightgrey; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

   VAR 엘 = document.getElementById를 ( "부문"); el.onkeydown = 함수 (EVT) { EVT = EVT || window.event를; 을 console.log ( "를 keyDown :"+ evt.keyCode); }; #division { 폭 : 90 픽셀; 높이 : 30 픽셀; 배경 : lightgrey; }

3. ---

   3.일반 JS 여기 예 :

   일반 JS 여기 예 :

   document.querySelector ( '# myDiv').하여 addEventListener ( '의 keyup', 기능 (E) { CONSOLE.LOG (e.key) }) #myDiv { 개요 : 없음; }

   저를 누르고 입력을 시작

from https://stackoverflow.com/questions/3149362/capture-key-press-or-keydown-event-on-div-element by cc-by-sa and MIT license