Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

คุณสมบัติ altKey ของ Keyboard Event ใน JavaScript คืออะไร?


บทนำ

คุณสมบัติ altKey ของ Keyboard Event ใน JavaScript ใช้เพื่อตรวจสอบว่า Alt (หรือ Option ⌥ บน Mac) ถูกกดค้างอยู่หรือไม่ในขณะที่เกิดเหตุการณ์แป้นพิมพ์ (keydown, keyup, keypress) คุณสมบัตินี้จะคืนค่า true หาก Alt ถูกกดอยู่ และ false หากไม่ได้กด

ตัวอย่างการใช้งาน

ลองรันโค้ดด้านล่างแล้วกดแป้นพิมพ์พร้อมกับกด Alt ค้าง:

<!DOCTYPE html>
<html>
<body>
  <input type="text" onkeydown="funcAltKey(event)" placeholder="กดแป้นพิมพ์พร้อม Alt...">
  <div id="res" style="margin-top:10px; font-weight:bold;">กดแป้นพิมพ์ใดๆ</div>

  <script>
    function funcAltKey(event) {
      var val = document.getElementById("res");
      if (event.altKey) {
        val.innerHTML = "Alt: กดอยู่ (event.altKey = true)";
      } else {
        val.innerHTML = "Alt: ไม่ได้กด (event.altKey = false)";
      }
    }
  </script>
</body>
</html>

คำอธิบายเพิ่มเติม

  • event.altKey เป็นคุณสมบัติแบบ Read-only (อ่านอย่างเดียว)
  • ทำงานร่วมกับเหตุการณ์คีย์บอร์ดทั้งหมด: keydown, keyup, keypress
  • บน Mac: Alt = Option ⌥, Ctrl = Control ⌃, Meta = Command ⌘
  • มักใช้ร่วมกับคีย์ลัด (Shortcuts) เช่น Alt+F4 ปิดหน้าต่าง, Alt+Tab สลับโปรแกรม

คุณสมบัติ Modifier Keys อื่นๆ ใน Keyboard Event

คุณสมบัติ ปุ่มที่ตรวจสอบ (Windows/Linux) ปุ่มที่ตรวจสอบ (Mac)
altKeyAltOption ⌥
ctrlKeyCtrlControl ⌃
metaKeyWindows Key ⊞Command ⌘
shiftKeyShiftShift ⇧

ตัวอย่างตรวจสอบหลายปุ่มพร้อมกัน

<!DOCTYPE html>
<html>
<body>
  <input type="text" onkeydown="checkModifiers(event)" placeholder="กดแป้นพิมพ์พร้อม Ctrl/Alt/Shift...">
  <div id="modifiers" style="margin-top:10px; font-family:monospace;"></div>

  <script>
    function checkModifiers(event) {
      var keys = [];
      if (event.ctrlKey) keys.push("Ctrl");
      if (event.altKey) keys.push("Alt");
      if (event.shiftKey) keys.push("Shift");
      if (event.metaKey) keys.push("Meta");
      
      var msg = keys.length ? keys.join(" + ") + " + " + event.key : event.key;
      document.getElementById("modifiers").textContent = "กด: " + msg;
    }
  </script>
</body>
</html>

ตารางสรุปค่าที่คืน

สถานะ ค่าที่คืน
กด Alt ค้าง true
ไม่ได้กด Alt false