Jak pobrać zdarzenia klawiatury na elemencie, który nie akceptuje fokusu?

Question

wiem, że do obsługi zdarzenia klawiatury w polu wejściowym można użyć:

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

Ale teraz, mam kilka div i li elementy, a nie mam element form i żaden z moich elementy są uważane za elementy formularza i żaden z nich nie akceptuje focus lub tab i tym podobnych.

Ale teraz potrzebuję obsługi zdarzenia keyup (lub keydown lub keypress, nie ma znaczenia) w elemencie div. Próbowałem:

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

Ale problem polega na tym, że nie działa. Co mam zrobić?

Answer 1

Domyślnie nie można ustawić ostrości. Jednak można to zmienić poprzez dodanie atrybutu do divtabindex:

Można wtedy dać div ostrość, a także rozmycie go ze zdarzeniem hover:

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

Gdy div ma focus, będzie akceptować zdarzenia klawiatury. Możesz zobaczyć przykład tego działającego here.

Answer 2

Interesujące pytanie. (Tutaj kolejny dla ciebie, jak wiedzieć, div ma fokus?) Jak widzę, twój div jest popup (jego identyfikator to dialog). Tutaj masz Obejście:

Na podręcznym otwarte:

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

Na poup zamknij

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

Następnie wiązanie:

$('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. 
     } 
    } 
}); 

ten sposób my” Ponownie naśladować zdarzenie keyup na div. Mam nadzieję, że to pomoże. Cheers

PS: Pamiętaj, że możesz używać #dialog zamiast div#dialog

Answer 3

za spóźnienie, ale poprawny sposób, aby zapewnić prawidłowe ogień zdarzeń jest teraz za pomocą HTML5, nowy atrybut „contenteditable”:

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

klasyczny Js mechanik może być stosowana:

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);});