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

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

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

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

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

let 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');
	}
});

กำหนดองค์ประกอบ ทำใหเมื่อคลิก ที่มัน จะเปลี่ยนสีเป็นสีแดง แต่เฉพาะ เมื่อในขณะคลิกมีปุ่ม Alt ถูกกดค้างไว้

สมมติว่าคุณมีรายการ ul พร้อมแท็ก li:

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

ทำใหเมื่อคลิกที่ li ใดๆ ที่ท้ายข้อความของมันจะเพิ่มตัวเลข 1 หากกดปุ่ม Ctrl และเพิ่มตัวเลข 2 หากกดปุ่ม Shift