บันทึกการกดปุ่ม (หรือการกดคีย์) เหตุการณ์บนองค์ประกอบ DIV

คุณดักเหตุการณ์การกดปุ่มหรือการกดปุ่มบนองค์ประกอบ DIV (โดยใช้ jQuery) ได้อย่างไร

สิ่งที่จำเป็นในการให้ความสำคัญกับองค์ประกอบ DIV คืออะไร

(1) ตั้งค่าtabindexคุณสมบัติ:

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

(2) ผูกกับการคีย์:

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

วิธีตั้งโฟกัสเมื่อเริ่มต้น:

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

หากต้องการลบ - หากคุณไม่ชอบ - divเส้นขอบโฟกัสให้ตั้งoutline: noneใน CSS

ดูตารางของการพิมพ์ซ้ำมากkeyCodeเป็นไปได้

รหัสทั้งหมดสมมติว่าคุณใช้ jQuery

ตัวอย่างที่นี่ใน JS ธรรมดา:

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>

แอตทริบิวต์tabindex HTML บ่งชี้ว่าองค์ประกอบสามารถโฟกัสได้หรือไม่และ / หรือมีส่วนร่วมในการนำทางคีย์บอร์ดตามลำดับหรือไม่ (โดยปกติจะมีTabคีย์) อ่านMDN Web Docsสำหรับการอ้างอิงแบบเต็ม

ใช้ 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>

ใช้จาวาสคริปต์

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>