คุณสมบัติ ctrlKey ของ HTML DOM TouchEvent ส่งคืน ค่า Boolean (true/false) ที่บ่งบอกสถานะว่าปุ่ม Ctrl ถูกกดค้างอยู่ขณะที่เหตุการณ์สัมผัส (touch event) ถูกกระตุ้นหรือไม่
ไวยากรณ์ (Syntax)
touchEvent.ctrlKey
ค่าที่เป็นไปได้
| ค่า | คำอธิบาย |
|---|---|
true | ปุ่ม Ctrl ถูกกดค้างขณะเกิด touch event |
false | ปุ่ม Ctrl ไม่ได้ถูกกดขณะเกิด touch event |
หมายเหตุ: ตัวอย่าง Touch event ถูกทดสอบบน HTML Editor ออนไลน์ที่เข้าถึงผ่านมือถือหรืออุปกรณ์ที่รองรับการสัมผัส เพื่อให้สามารถทดสอบการสัมผัสจริงได้ (เช่น กดค้าง 2 วินาที)
ตัวอย่างการใช้งาน
ตัวอย่างนี้เปลี่ยนสีพื้นหลังของฟอร์มเมื่อกดปุ่ม Ctrl พร้อมสัมผัสหน้าจอ
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent ctrlKey</title>
<style>
form { width:70%; margin: 0 auto; text-align: center; }
* { padding: 2px; margin:5px; }
input[type="button"] { border-radius: 10px; }
legend{ border-color: #dc3545; }
span { display: inline-block; width: 40px; height: 20px; margin: 1px; color: #fff; border: 3px solid black; }
div span:nth-child(1){ background-color: #FF8A00; }
div span:nth-child(2){ background-color: #F44336; }
div span:nth-child(3){ background-color: #03A9F4; }
div span:nth-child(4){ background-color: #4CAF50; }
</style>
</head>
<body>
<form id="formSelect" ontouchstart="eventAction(event)">
<fieldset>
<legend>HTML-DOM-TouchEvent-ctrlKey</legend>
<label for="textSelect">Background Color Changer</label>
<div><span>alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
<div id="divDisplay">No HotKey Pressed</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var formSelect = document.getElementById("formSelect");
function eventAction(event) {
if(event.ctrlKey){
formSelect.style.backgroundColor = '#F44336';
formSelect.style.color = '#FFF';
divDisplay.textContent = 'ctrl Key Pressed';
}
}
</script>
</body>
</html>
ผลลัพธ์ (Output)
ก่อนกระตุ้น touch event:
หลังกระตุ้น touch event พร้อมกดปุ่ม Alt (ตัวอย่างผิดพลาดในต้นฉบับ - ควรเป็น Ctrl):
