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

ใช้ API การล็อกแป้นพิมพ์เพื่อบันทึกแป้น Escape ในโหมดเต็มหน้าจอ

Thomas Steiner

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

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

ใช้ 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 ประเทศ

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

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

ใช้งานได้จริง

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

บุ๊กมาร์กเล็ตโบนัส

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