Menangkap peristiwa tekan tombol (atau keydown) pada elemen DIV

Bagaimana Anda menjebak penekanan tombol atau acara kunci pada elemen DIV (menggunakan jQuery)?

Apa yang diperlukan untuk memberikan fokus elemen DIV?

(1) Setel tabindexatribut:

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

(2) Mengikat ke keydown:

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

Untuk mengatur fokus pada awal:

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

Untuk menghapus - jika Anda tidak menyukainya - divperbatasan fokus, atur outline: nonedi CSS.

Lihat tabel kode kunci untuk lebih banyak keyCodekemungkinan.

Semua kode dengan asumsi Anda menggunakan jQuery.

Di sini contoh di JS polos:

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>

atribut HTML tabindex menunjukkan jika elemennya dapat difokuskan, dan jika / di mana ia berpartisipasi dalam navigasi keyboard berurutan (biasanya dengan Tabtombol). Baca MDN Web Documents untuk referensi lengkap.

Menggunakan 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>

Menggunakan 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>