Как получить события клавиатуры на элементе, который не принимает фокус? - PullRequest
Новая
       43

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

21 голосов
/ 09 июля 2011

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

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

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

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

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

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

Ответы [ 3 ]

52 голосов
/ 09 июля 2011

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 имеет фокус, он будет принимать события клавиатуры. Вы можете увидеть пример этой работы здесь .

6 голосов
/ 20 марта 2016

Я опоздал, но правильный способ обеспечить правильное срабатывание события сейчас - использовать новый атрибут 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);});
1 голос
/ 09 июля 2011

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

При открытии всплывающего окна: 

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

При закрытии мешка: 

$("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

...