div 요소에서 키 누름(또는 키다운) 이벤트를 캡처하려면 어떻게 해야 합니까?

div 요소에서 키 누름(또는 키다운) 이벤트를 캡처하려면 어떻게 해야 합니까?

(jQuery를 사용하여) DIV 요소에서 키 누름 또는 키 다운 이벤트를 트랩하려면 어떻게 해야 합니까?

DIV 요소에 초점을 맞추려면 무엇이 필요합니까?

설정tabindex속성:

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

키다운에 바인딩:

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

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

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

만약 당신이 그것이 마음에 들지 않는다면 제거하는 것.div포커스 테두리, 설정outline: noneCSS에서.

자세한 내용은 키코드 표 참조keyCode가능성

당신이 jQuery를 사용한다고 가정하는 모든 코드.

#

다음은 일반 JS의 예입니다.

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})

#myDiv {
  outline: none;
}

<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

tabindex HTML 속성은 요소가 초점을 맞출 수 있는지 여부와 순차적인 키보드 탐색에 참여하는지 여부를 나타냅니다(일반적으로Tab자세한 내용은 MDN 웹 문서를 참조하십시오.

Jquery 사용

$( "#division" ).keydown(function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
});

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

JavaScript 사용

var el = document.getElementById("division");

el.onkeydown = function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
};

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

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

언급URL : https://stackoverflow.com/questions/3149362/how-do-i-capture-a-key-press-or-keydown-event-on-a-div-element