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

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

Thomas Steiner

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

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

ใช้ Keyboard Lock API

Keyboard Lock API พร้อมใช้งานในเมธอด navigator.keyboard.lock() ของอินเทอร์เฟซ Keyboard โดยจะแสดงผล Promise หลังจากเปิดใช้การบันทึกการกดแป้นสำหรับแป้นใดก็ได้หรือทั้งหมดบนแป้นพิมพ์จริง วิธีนี้จะจับได้เฉพาะคีย์ที่ระบบปฏิบัติการพื้นฐานให้สิทธิ์เข้าถึงเท่านั้น โชคดีที่ปุ่ม 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 โลก

สาธิต

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

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

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

Bookmarklet โบนัส

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