Почему мой 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/. Нажмите «Выбрать состояние» или нажмите «Последнее имя» и нажмите «Вкладка», чтобы перейти к следующему DIV. Однако, когда это меню имеет фокус, нажатие любой клавиши не активирует обработчик выше, по крайней мере, это не для меня на Mac Chrome или Firefox.

Благодарен за любую помощь, -

Answer 1

Проблема заключается в том, что при нажатии tab, акцент делается на .select вместо .select-styleddiv element, поскольку .select является родителем, который удерживает остальные элементы внутри.Возможно, вам, вероятно, понадобится привязать ваш keydown к .select.

$(".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") позволит ему получить JavaScript события клавиатуры.

---

Объяснение: JQuery API для .keydown() упоминает, что он работает только на форматируемых элементов:

Он может быть прикреплен к любому элементу, но событие отправляется только элемента в центре внимания. Фокусируемые элементы могут варьироваться от браузеров, но элементы формы всегда могут получить фокус, поэтому разумны кандидатов на этот тип события.

За это previous Stack Overflow answer, <div> элементы не фокусируемый по умолчанию, но DOM Level 2 HTML утверждает, что среди других правил, любой элемент с tabindex может получить фокус:

Современные браузеры определяют фокус() на HTMLElement, но элемент не будет на самом деле получить фокус, если это не один из:

• HTMLAnchorElement/HTMLAreaElement с HREF
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement но не отключены (IE на самом деле дает ошибку, если вы попытаетесь), и загрузка файлов имеют необычное поведение по соображениям безопасности
• HTMLIFrameElement (хотя его фокусировка ничего полезного не делает). Другие элементы внедрения также, возможно, я не тестировал их все.
• Любой элемент с TabIndex

---

Альтернативно, и это могло бы быть лучше практики, вы можете просто связать обработчик keydown события к $(document), когда элемент получает focus (который ваш Jquery уже обрабатывает без проблем), и отвяжите его на blur.