ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <style> #textBox { display: none; color: red; } </style> <body> <h1>Detecting Caps Lock Example</h1> <input class="inputfield" value="Some textBox.." /> <h2>กด Caps Lock ในช่องกรอกข้างบนเพื่อตรวจสอบการแจ้งเตือน</h2> <h2 class="textBox">WARNING! Caps lock is ON.</h2> <script> var input = document.querySelector(".inputfield"); var textBox = document.querySelector(".textBox"); input.addEventListener("keyup", event => { if (event.getModifierState("CapsLock")) { textBox.style.display = "block"; } else { textBox.style.display = "none"; } }); </script> </body> </html>
ผลลัพธ์
โค้ดข้างต้นจะให้ผลลัพธ์ดังนี้ -
เมื่อพิมพ์ข้อความในช่องกรอกขณะที่ Caps Lock เปิดอยู่ -
