มอบประสบการณ์แบบเต็มหน้าจอที่สมจริงสำหรับกรณีการใช้งานที่หลากหลาย ซึ่งรวมถึงเว็บไซต์แบบอินเทอร์แอกทีฟ เกม และการสตรีมผ่านเดสก์ท็อปหรือแอปพลิเคชันระยะไกล
ด้วยผู้ใช้จำนวนมากขึ้นเรื่อยๆ ที่ใช้เวลาส่วนใหญ่ในเบราว์เซอร์ เว็บไซต์ เกม การสตรีมบนเดสก์ท็อประยะไกล และการสตรีมแอปพลิเคชันที่มีการโต้ตอบสูงจึงมุ่งมั่นที่จะมอบประสบการณ์ที่เต็มอิ่มสมจริงแบบเต็มหน้าจอ เพื่อให้บรรลุเป้าหมายนี้ เว็บไซต์ต้องเข้าถึงแป้นพิเศษและแป้นพิมพ์ลัดขณะอยู่ในโหมดเต็มหน้าจอ เพื่อให้สามารถใช้สำหรับการนำทาง เมนู หรือการเล่นเกม ตัวอย่างคีย์ที่อาจต้องใช้ ได้แก่ Esc, Alt + Tab, Cmd + ` และ Ctrl + N
โดยค่าเริ่มต้น คีย์เหล่านี้จะใช้ไม่ได้ในเว็บแอปพลิเคชัน เนื่องจากคีย์ดังกล่าวบันทึกไว้โดยเบราว์เซอร์หรือระบบปฏิบัติการที่สำคัญ API การล็อกแป้นพิมพ์ช่วยให้เว็บไซต์ใช้คีย์ทั้งหมดที่มีอยู่ซึ่งระบบปฏิบัติการของโฮสต์อนุญาตได้ (โปรดดูความเข้ากันได้ของเบราว์เซอร์)
การใช้ API การล็อกแป้นพิมพ์
อินเทอร์เฟซ Keyboard ของ Keyboard API มีฟังก์ชันที่เปิด/ปิดการบันทึกการกดแป้นจากแป้นพิมพ์จริง รวมถึงรับข้อมูลเกี่ยวกับรูปแบบแป้นพิมพ์ของผู้ใช้
วิชาบังคับก่อน
โหมดเต็มหน้าจอที่พร้อมใช้งานในเบราว์เซอร์สมัยใหม่มี 2 ประเภท ได้แก่ แบบ JavaScript ที่เริ่มต้นผ่าน Fullscreen API และแบบที่ผู้ใช้เริ่มต้นผ่านแป้นพิมพ์ลัด API การล็อกแป้นพิมพ์จะพร้อมใช้งานเฉพาะเมื่อโหมดเต็มหน้าจอที่เริ่มต้นโดย JavaScript ทำงานอยู่ นี่คือตัวอย่างแบบเต็มหน้าจอที่เริ่มต้นโดย JavaScript:
await document.documentElement.requestFullscreen();
การตรวจหาฟีเจอร์
คุณสามารถใช้รูปแบบต่อไปนี้เพื่อตรวจสอบว่าระบบรองรับ Keyboard Lock API หรือไม่
if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
// Supported!
}
กำลังล็อกแป้นพิมพ์
เมธอด lock() ของอินเทอร์เฟซ Keyboard จะแสดงสัญญาณบอกสถานะหลังจากเปิดใช้การบันทึกการกดแป้นบนแป้นพิมพ์จริงทั้งหมด วิธีนี้บันทึกได้เฉพาะคีย์ที่ให้สิทธิ์เข้าถึงโดยระบบปฏิบัติการที่เกี่ยวข้อง เมธอด lock() จะใช้อาร์เรย์ของรหัสคีย์อย่างน้อย 1 รายการเพื่อล็อก หากไม่ได้ระบุรหัสคีย์ไว้ ทุกคีย์จะล็อก รายการค่ารหัสคีย์ที่ถูกต้องมีอยู่ในข้อกำหนดค่าของรหัสเหตุการณ์ UI แป้นพิมพ์
กำลังจับภาพแป้นทั้งหมด
ตัวอย่างต่อไปนี้บันทึกการกดแป้นทั้งหมด
navigator.keyboard.lock();
กำลังจับภาพเฉพาะแป้น
ตัวอย่างต่อไปนี้จับคีย์ W, A, S และ D โดยจะจับคีย์เหล่านี้ไม่ว่าจะใช้แป้นกดร่วมแบบใดในการกดแป้น สมมติว่าใช้เลย์เอาต์ QWERTY แบบ US การลงทะเบียน "KeyW" จะช่วยรับประกันว่าระบบส่ง W, Shift + W, Control + W, Control + Shift + W และชุดค่าผสมของคีย์ตัวปรับแต่งอื่นๆ ทั้งหมดที่มี W ไปยังแอป เช่น "KeyA", "KeyS" และ "KeyD"
await navigator.keyboard.lock([
"KeyW",
"KeyA",
"KeyS",
"KeyD",
]);
คุณตอบสนองต่อการกดแป้นที่บันทึกไว้ได้โดยใช้เหตุการณ์ของแป้นพิมพ์
ตัวอย่างเช่น โค้ดนี้ใช้เหตุการณ์ onkeydown
document.addEventListener('keydown', (event) => {
if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
// Do something when the 'A' key was pressed, but only
// when not in combination with the command or control key.
}
});
กำลังปลดล็อกแป้นพิมพ์
เมธอด unlock() จะปลดล็อกคีย์ทั้งหมดที่บันทึกโดยเมธอด lock() และแสดงผลแบบพร้อมกัน
navigator.keyboard.unlock();
เมื่อปิดเอกสาร เบราว์เซอร์จะเรียก unlock() โดยปริยายเสมอ
สาธิต
คุณทดสอบ API การล็อกแป้นพิมพ์ได้โดยเรียกใช้การสาธิตใน Glitch อย่าลืมดูซอร์สโค้ด การคลิกปุ่ม เข้าสู่โหมดเต็มหน้าจอ ด้านล่างจะเป็นการเปิดเดโมในหน้าต่างใหม่ เพื่อให้เข้าสู่โหมดเต็มหน้าจอได้
ข้อควรพิจารณาด้านความปลอดภัย
ข้อกังวลอย่างหนึ่งของ API นี้คืออาจมีการนำไปใช้เพื่อค้นหาคีย์ทั้งหมด และ (ร่วมกับ Fullscreen API และ PointerLock API) จะทำให้ผู้ใช้ออกจากหน้าเว็บไม่ได้ เพื่อป้องกันปัญหานี้ ข้อกำหนดกำหนดให้เบราว์เซอร์ระบุวิธีให้ผู้ใช้ออกจากการล็อกแป้นพิมพ์ แม้ว่า API จะขอคีย์ทั้งหมดก็ตาม ใน Chrome วิธีแก้ไขปัญหานี้คือการกดแป้น Esc นาน (2 วินาที) เพื่อทริกเกอร์การออกจากการล็อกแป้นพิมพ์
ลิงก์ที่มีประโยชน์
- แบบร่างข้อกำหนด
- ที่เก็บของ GitHub
- รายการ ChromeStatus
- ข้อบกพร่องในการติดตามของ Chrome
- รหัสหลักสำหรับแป้นพิมพ์มาตรฐาน
กิตติกรรมประกาศ
บทความนี้ได้รับการตรวจสอบโดย Joe Medley และ Kayce Basques ข้อกำหนดของการล็อกแป้นพิมพ์เขียนโดย Gary Kacmarcik และ Jamie Walch รูปภาพหลักโดย Ken Suarez ใน Unsplash