Chụp sự kiện nhấn phím (hoặc nhấn phím) trên phần tử DIV

Làm thế nào để bạn bẫy sự kiện nhấn phím hoặc khóa xuống trên một phần tử DIV (sử dụng jQuery)?

Những gì được yêu cầu để tập trung vào yếu tố DIV?

(1) Đặt tabindexthuộc tính:

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

(2) Ràng buộc với phím tắt:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

Để đặt trọng tâm khi bắt đầu:

$(function() {
   $('#mydiv').focus();
});

Để xóa - nếu bạn không thích nó - divđường viền tiêu điểm, hãy đặt outline: nonetrong CSS.

Xem bảng mã khóa để biết thêm keyCodekhả năng.

Tất cả các mã giả sử bạn sử dụng jQuery.

Dưới đây là ví dụ về JS đơn giản:

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})

#myDiv {
  outline: none;
}

<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

thuộc tính HTML tabindex cho biết liệu phần tử của nó có thể được tập trung hay không và nếu / nơi nó tham gia vào điều hướng bàn phím tuần tự (thường là với Tabphím). Đọc Tài liệu Web MDN để tham khảo đầy đủ.

Sử dụng Jquery

$( "#division" ).keydown(function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
});

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

Sử dụng JavaScript

var el = document.getElementById("division");

el.onkeydown = function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
};

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

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