โหมดเต็มหน้าจอที่ดีขึ้นด้วย Keyboard Lock API

ใช้ Keyboard Lock API เพื่อจับภาพแป้น Escape ในโหมดเต็มหน้าจอ

Thomas Steiner

หากคุณเคยเล่นเกมบนเว็บแบบเต็มหน้าจอที่ปรากฏขึ้นกล่องโต้ตอบในเกมซึ่งคุณยกเลิกด้วยแป้น Escape โดยไม่ได้ตั้งใจ คุณอาจพบว่าตัวเองออกจากโหมดเต็มหน้าจอ ประสบการณ์ที่น่าหงุดหงิดนี้เกิดจากการที่กล่องโต้ตอบและโหมดเต็มหน้าจอ "ต่อสู้" สำหรับแป้น Escape เกมนี้เป็นการต่อสู้ที่ไม่เสมอภาคเพราะ โดยค่าเริ่มต้น โหมดเต็มหน้าจอจะชนะเสมอ แต่คุณจะทำให้กล่องโต้ตอบนี้หาผู้ชนะสำหรับแป้น Escape ได้อย่างไร ซึ่ง Keyboard Lock API จะเข้ามามีบทบาทในส่วนนี้

การสนับสนุนเบราว์เซอร์

การสนับสนุนเบราว์เซอร์

• 68
• 79
• x
• x

แหล่งที่มา

การใช้ Keyboard Lock API

Keyboard Lock API พร้อมให้ใช้งานใน navigator.keyboard. เมธอด lock() ของอินเทอร์เฟซ Keyboard จะแสดงสัญญาหลังจากเปิดใช้การบันทึกการกดแป้นสำหรับแป้นใดปุ่มหนึ่งหรือทั้งหมดบนแป้นพิมพ์จริง วิธีนี้สามารถบันทึกได้เฉพาะคีย์ที่ได้รับสิทธิ์เข้าถึงจากระบบปฏิบัติการที่ใช้งานอยู่ โชคดีที่คีย์ Escape เป็นหนึ่งในคีย์นี้

หากแอปของคุณมีโหมดเต็มหน้าจอ ให้ใช้การเพิ่มประสิทธิภาพแบบ Keyboard Lock API ด้วยการกดปุ่ม Escape เมื่อขอโหมดเต็มหน้าจอ ปลดล็อก (ไม่ได้จับภาพแล้ว) แป้นพิมพ์เมื่อออกจากโหมดเต็มหน้าจอผ่านเมธอด unlock() ของอินเทอร์เฟซ Keyboard

// Feature detection.
const supportsKeyboardLock =
    ('keyboard' in navigator) && ('lock' in navigator.keyboard);

if (supportsKeyboardLock) {
  document.addEventListener('fullscreenchange', async () => {
    if (document.fullscreenElement) {
      // The magic happens here… 🦄
      await navigator.keyboard.lock(['Escape']);
      console.log('Keyboard locked.');
      return;
    }
    navigator.keyboard.unlock();
    console.log('Keyboard unlocked.');
  });
}

ซึ่งหมายความว่าเมื่อผู้ใช้อยู่ในโหมดเต็มหน้าจอ การกด Escape จะยกเลิกกล่องโต้ตอบโดยค่าเริ่มต้น หากผู้ใช้กดปุ่ม และกดแป้น Escape ค้างไว้ ผู้ใช้จะยังคงออกจากโหมดเต็มหน้าจอได้ สิ่งที่ดีที่สุดจากทั้งสองโลก

ข้อมูลประชากร

คุณทดสอบได้ทั้งตัวแปรเริ่มต้นและตัวแปรที่ปรับปรุงอย่างต่อเนื่องในการสาธิต ซอร์สโค้ดของการสาธิตดูสะอาดตาน้อยกว่าตัวอย่างด้านบน เนื่องจากต้องแสดงพฤติกรรมทั้ง 2 อย่าง

ในทางปฏิบัติ

หากต้องการใช้การเพิ่มประสิทธิภาพแบบต่อเนื่องนี้ในทางปฏิบัติ เพียงคัดลอกข้อมูลโค้ดด้านบน โดยออกแบบมาเพื่อให้ใช้งานได้โดยไม่ต้องเปลี่ยนแปลงสิ่งใด แม้จะมีโค้ดแบบเต็มหน้าจออยู่ ลองดูตัวอย่างต่อไปนี้ ประชาสัมพันธ์สำหรับเกม Freeciv เมื่อรวมการประชาสัมพันธ์แล้ว คุณสามารถยกเลิก กล่องโต้ตอบในเกมทั้งหมดได้โดยกด Escape

โบนัส bookmarklet

แอปหรือเกมบางรายการที่รองรับโหมดเต็มหน้าจอไม่ใช่โอเพนซอร์สหรือยอมรับแพตช์ของคุณ คุณสามารถเพิ่ม bookmarklet ลงในแถบบุ๊กมาร์กและคลิกเพื่อเปิดใช้งานโหมดเต็มหน้าจอที่ดีขึ้นได้