Как захватить события клавиатуры на элемент, который не принимает фокус?

Я знаю, что для обработки событий клавиатуры в поле ввода вы можете использовать:

$('input').keyup(function(e){
var code = e.keyCode // and 13 is the keyCode for Enter
});

Но теперь у меня есть некоторые элементы div и li, и у меня нет элемента form, и ни один из моих элементов не считается элементом формы, и ни один из них не принимает фокус или и т.д.

Но теперь мне нужно обработать событие keyup (или keydown или keypress, не имеет значения) в элементе div. Я пробовал:

$('div#modal').keyup(function(e){
   if (e.keyCode == 13)
   {
      $('#next').click(); // Mimicking mouse click to go to the next level.
   }
});

Но проблема в том, что она не работает. Что мне делать?

ОТВЕТЫ

Ответ 1

A div по умолчанию не может быть задано фокус. Однако вы можете изменить это, добавив атрибут tabindex в div:

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

Затем вы можете дать фокус div, а также размыть его с событием hover:

$("#example").hover(function() {
    this.focus();
}, function() {
    this.blur();
}).keydown(function(e) {
    alert(e.keyCode);
});

Когда в фокусе div будут приняты события клавиатуры. Вы можете увидеть пример этой рабочей здесь.

Ответ 2

Я опаздываю, но правильный способ обеспечить правильный огонь событий - это использовать новый атрибут HTML5 "contenteditable":

<div id="myEditableDiv" contenteditable="true"> txt_node </div>

классический Js-механик может быть применен:

var el = document.getElementById('myEditableDiv');
el.addEventListener('keypress', function(e){console.log(e.target.innerText);});
el.addEventListener('keyup', function(e){console.log(e.target.innerText);});
el.addEventListener('keydown', function(e){console.log(e.target.innerText);});

Ответ 3

Интересный вопрос. (Здесь другой для вас, как узнать, что div имеет фокус?) Как я вижу, ваш div является всплывающим (его id dialog). Здесь у вас есть обходное решение:

В открывшемся всплывающем окне:

$("div#modal").data("isOpen", true);

Вкл. poup close:

$("div#modal").data("isOpen", false);

Затем привязка:

$('body').keyup(function(e){  //Binding to body (it accepts key events)
   if($("div#modal").data("isOpen")){  //Means we're in the dialog
       if (e.keyCode == 13) //This keyup would be in the div dialog
       {
          $('#next').click(); // Mimicking mouse click to go to the next level.
       }
   }
});

Таким образом, мы подражаем событию keyup на div. Надеюсь это поможет. Приветствия

PS: Обратите внимание, что вы можете использовать #dialog вместо div#dialog