Làm thế nào để lấy các sự kiện bàn phím trên một phần tử không chấp nhận tiêu điểm?

Question

Tôi biết rằng để xử lý sự kiện bàn phím trong một lĩnh vực đầu vào bạn có thể sử dụng:

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

Nhưng, bây giờ, tôi có một số div và li yếu tố, và tôi không có một yếu tố form, và không ai trong tôi các yếu tố được coi là các yếu tố hình thức và không có phần tử nào chấp nhận các tiêu điểm hoặc tab và các nội dung tương tự.

Nhưng bây giờ tôi cần xử lý sự kiện keyup (hoặc keydown hoặc keypress, không quan trọng) trong phần tử div. Tôi đã thử:

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

Nhưng vấn đề là, nó không hoạt động. Tôi nên làm gì?

Answer 1

Theo mặc định, không thể lấy tiêu điểm cho div. Tuy nhiên, bạn có thể thay đổi điều đó bằng cách thêm một thuộc tính tabindex đến div:

Sau đó bạn có thể cung cấp cho các div tập trung, và cũng có thể làm mờ nó với hover sự kiện:

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

Khi div có tập trung, nó sẽ chấp nhận các sự kiện bàn phím. Bạn có thể xem ví dụ về cách làm việc here này.

Answer 2

Câu hỏi thú vị. (Ở đây một cho bạn, làm thế nào để biết div đã tập trung?) Như tôi có thể thấy, div của bạn là một popup (id của nó là dialog). Ở đây bạn có một cách giải quyết:

Mở cửa sổ bật lên mở:

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

On poup gần:

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

Sau đó, các ràng buộc:

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

Bằng cách này, chúng tôi tái bắt chước sự kiện keyup trên div. Hy vọng điều này sẽ hữu ích. Chúc mừng

PS: Lưu ý rằng bạn có thể sử dụng #dialog thay vì div#dialog

Answer 3

tôi đến trễ nhưng cách chính xác để đảm bảo ngọn lửa Sự kiện chính thức tại là bằng cách sử dụng HTML5 thuộc tính mới "contenteditable":

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

cổ điển cơ khí Js sau đó có thể được áp dụng:

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