การติดตามคีย์มือดิฟายเออร์ใน JavaScript

ด้วยวัตถุ Event เราสามารถทราบได้ว่า ในขณะเกิดเหตุการณ์ มีการกดปุ่ม Ctrl, Alt และ Shift หรือไม่ นี่ทำได้ โดยใช้คุณสมบัติ ctrlKey, altKey และ shiftKey - พวกมันมีค่าเป็น true หรือ false ขึ้นอยู่กับว่าในขณะนั้น มีปุ่มดังกล่าวถูกกดอยู่หรือไม่

ลองดูตัวอย่าง สมมติว่าเรามีปุ่มต่อไปนี้:

html<button id="elem">ข้อความ</button>

เมื่อคลิกที่ปุ่ม เราจะแสดงข้อความ เกี่ยวกับว่ามีการกดปุ่ม Ctrl, Alt หรือ Shift หรือไม่:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
  if (event.ctrlKey) {
    console.log('กด Ctrl');
  }
  
  if (event.altKey) {
    console.log('กด Alt');
  }
  
  if (event.shiftKey) {
    console.log('กด Shift');
  }
});

html<ul id="elem">
  <li>ข้อความ</li>
  <li>ข้อความ</li>
  <li>ข้อความ</li>
  <li>ข้อความ</li>
  <li>ข้อความ</li>
</ul>