내 DIV에 포커스가있을 때 키 누르기 이벤트를 캡처하지 않는 이유는 무엇입니까?

Question

jQuery 1.12를 사용하고 있습니다. 포커스가있을 때 DIV가 주요 프레스 (특히 화살표 위로)를 캡처하기를 원합니다. 그래서 나는 이것을 따라 갔다.

$('div.select-styled').bind('keydown', function(event) { 
    console.log(event.keyCode); 
    elt = $(this).search(".select-options li:hover"); 
    console.log(elt); 
    switch(event.keyCode){ 
    // case up 
    case 38: 
     console.log(“up pressed.”) 
     break; 
    case 40: 
     console.log(“down pressed”) 
     break; 
    } 
}); 

그러나 이것은 키 누름을 포착하지 못한다. 나의 피들을 여기에서보십시오 - http://jsfiddle.net/cwzjL2uw/10/. "Select State"메뉴를 클릭하거나 "성"필드를 클릭하고 "Tab"을 클릭하여 다음 DIV에 집중하십시오. 그러나 해당 메뉴에 포커스가있는 경우 키를 클릭해도 위의 핸들러가 활성화되지 않습니다. 적어도 Mac Chrome이나 Firefox에서는 나에게 해당되지 않습니다. 이 자바 스크립트 키보드 이벤트를 수신 할 수 있습니다 : -

어떤 도움 주셔서 감사

,

Answer 1

문제는 당신이 tab 누르면 .select이 내의 요소의 나머지 부분을 보유하고있는 부모이기 때문에, 초점이 대신 .select-styleddiv element의 .select에 있다는 것입니다.그래서 당신은 아마 당신의 keydown.select에 바인딩해야 할 수도 있습니다. 은`.select` 요소가 이미 (내 대답은 아래 당)은`tabindex` 속성을 가지고 있기 때문에

$(".select").on('keydown',function(event) { 
    console.log(event.keyCode); 
    elt = $(this).search(".select-options li:hover"); 
    console.log(elt); 
    switch(event.keyCode){ 
    // case up 
    case 38: 

     break; 
    case 40: 
     break; 
    } 
}); 

다음은 Updated Fiddle

Answer 2

은 .select-styled 요소 tabindex 속성 (tabindex="1" 예)를주기.

---

설명 : .keydown()의의 jQuery API는 단지 포커스 요소에 작동하는지 언급 :

그것은 모든 요소에 부착 할 수 있지만 이벤트 만 요소로 전송 그 초점이 있습니다. 포커스 가능 요소는 브라우저마다 다를 수 있지만 양식 요소는 항상 포커스를받을 수 있으므로이 이벤트 유형에 대해 후보가 적합합니다. ,는 HTMLElement에

오늘의 브라우저 정의 초점() :이 previous Stack Overflow answer 당

, <div> 요소는 기본적으로 포커스 아니지만, DOM Level 2 HTML는 다른 규칙 중에서, tabindex 어떤 요소가 포커스를받을 수 있다고

• HTMLAnchorElement/HTMLAreaElement 반드시 href
로 : 그것의 하나 않는 한 요소는 실제로 초점을하지 것
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement 은 불가능 (당신이하려고하면 IE가 실제로 당신에게 오류를 제공), 및 파일 업로드 (을 집중하는 것은 아무것도 유용하지 않습니다하지만 보안상의 이유로
• HTMLIFrameElement에 대한 비정상적인 동작을 비활성화). 다른 임베딩 요소 또한 어쩌면 모든 것을 테스트하지 않았습니다. 요소가 (focus를받을 때
• 의 tabindex

---

또는이있는 모든 요소를,이 더 연습 할 수는 단순히 $(document)에 keydown 이벤트 처리기를 바인딩 할 수있는 당신의 jQuery를 이미 문제없이 처리), blur에서 바인딩 해제합니다.