มอบประสบการณ์การรับชมแบบเต็มหน้าจอที่สมจริงสำหรับกรณีการใช้งานต่างๆ ซึ่งรวมถึงเว็บไซต์แบบอินเทอร์แอกทีฟ เกม และการสตรีมเดสก์ท็อปหรือแอปพลิเคชัน
เนื่องจากผู้ใช้จำนวนมากขึ้นเรื่อยๆ ใช้เวลาส่วนใหญ่ไปกับเบราว์เซอร์ เว็บไซต์ เกม การสตรีมบนเดสก์ท็อปจากระยะไกล และการสตรีมแอปพลิเคชันจึงมุ่งมั่นที่จะมอบประสบการณ์การรับชมแบบเต็มหน้าจอที่สมจริง โดยเว็บไซต์จะต้องเข้าถึงแป้นพิเศษและแป้นพิมพ์ลัดขณะอยู่ในโหมดเต็มหน้าจอเพื่อให้ใช้การนำทาง เมนู หรือการเล่นเกมได้ ตัวอย่างคีย์ที่อาจต้องใช้ ได้แก่ Esc, Alt + Tab, Cmd + ` และ Ctrl + N
โดยค่าเริ่มต้น คีย์เหล่านี้จะใช้กับเว็บแอปพลิเคชันไม่ได้ เนื่องจากเบราว์เซอร์หรือระบบปฏิบัติการที่เกี่ยวข้องบันทึกไว้ Keyboard Lock API ช่วยให้เว็บไซต์ใช้คีย์ที่ใช้ได้ทั้งหมดซึ่งระบบปฏิบัติการของโฮสต์อนุญาต (โปรดดูความเข้ากันได้ของเบราว์เซอร์)
การใช้ Keyboard Lock API
อินเทอร์เฟซ Keyboard
ของ Keyboard API มีฟังก์ชันที่สลับการบันทึกการกดแป้นจากแป้นพิมพ์จริง รวมถึงการรับข้อมูลเกี่ยวกับรูปแบบแป้นพิมพ์ของผู้ใช้
วิชาบังคับก่อน
โหมดเต็มหน้าจอที่มีให้ใช้ในเบราว์เซอร์รุ่นใหม่มีอยู่ 2 ประเภทด้วยกัน ได้แก่ JavaScript ที่เริ่มต้นผ่าน API แบบเต็มหน้าจอ และเริ่มต้นโดยผู้ใช้ผ่านแป้นพิมพ์ลัด Keyboard Lock 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()
โดยปริยายเสมอ
ข้อมูลประชากร
คุณทดสอบ Keyboard Lock API โดยเรียกใช้การสาธิตใน Glitch โปรดตรวจสอบซอร์สโค้ด การคลิกปุ่มเข้าสู่โหมดเต็มหน้าจอด้านล่างจะเปิดเดโมในหน้าต่างใหม่เพื่อให้เข้าสู่โหมดเต็มหน้าจอได้
ข้อควรพิจารณาด้านความปลอดภัย
ข้อกังวลอย่างหนึ่งของ API นี้คือสามารถใช้จับคีย์ทั้งหมดและ (ร่วมกับ API แบบเต็มหน้าจอ และ PointerLock API) จะป้องกันไม่ให้ผู้ใช้ออกจากหน้าเว็บ เพื่อป้องกันกรณีนี้ ข้อกำหนดกำหนดให้เบราว์เซอร์มีวิธีให้ผู้ใช้ออกจากการล็อกแป้นพิมพ์แม้ว่า API จะขอแป้นทั้งหมดก็ตาม ใน Chrome ทางลัดนี้คือการกดแป้น Esc นาน (2 วินาที) เพื่อทริกเกอร์การออกจากการล็อกแป้นพิมพ์
ลิงก์ที่มีประโยชน์
- ฉบับร่างของข้อกำหนด
- ที่เก็บของ GitHub
- รายการ ChromeStatus
- ข้อบกพร่องในการติดตามของ Chrome
- รหัสแป้นพิมพ์สำหรับแป้นพิมพ์มาตรฐาน
ข้อความแสดงการยอมรับ
บทความนี้ได้รับการตรวจสอบโดย Joe Medley และ Kayce Basques ข้อมูลจำเพาะของฟีเจอร์การล็อกแป้นพิมพ์เขียนโดย Gary Kacmarcik และ Jamie Walch รูปภาพหลักของ Ken Suarez ใน Unsplash