מצב טוב יותר של מסך מלא עם ממשק ה-API של נעילת המקלדת

כדי לצלם את המקש Escape במצב מסך מלא, משתמשים ב- Keyboard Lock API.

Thomas Steiner

אם אי פעם שיחקתם במשחק אינטרנט במסך מלא, ובעקבות זאת הופיעה תיבת דו-שיח בתוך המשחק, שביטלתם באופן פתאומי את המקש Escape, סביר להניח שמצאתם את עצמכם יצאו ממצב מסך מלא. החוויה המתסכלת הזו נגרמת כתוצאה מכך שתיבת הדו-שיח ומצב המסך המלא 'נלחמות' על המקש Escape. זה קרב לא שווה כי כברירת מחדל, מצב מסך מלא תמיד מנצח. אבל איך אפשר להפוך את תיבת הדו-שיח למנצחת של המקש Escape? כאן נכנסים לתמונה ה-API לנעילת מקלדת.

תמיכת דפדפן

שימוש בממשק ה-API לנעילת מקלדת

Key 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, הוא עדיין יכול לצאת ממצב מסך מלא. נהנים משני העולמות.

הדגמה (דמו)

בהדגמה אפשר לבדוק גם את גרסת ברירת המחדל וגם את הווריאציות המשופרות בהדרגה. קוד המקור של ההדגמה פחות נקי מקטע הקוד הקודם, כי הוא צריך להציג את שתי ההתנהגויות.

בפועל

כדי להשתמש בשיפור ההדרגתי הזה בפועל, פשוט מעתיקים את קטע הקוד הקודם. הוא נועד לפעול ללא שינויים נדרשים, גם עם הקוד הקיים במסך מלא. לדוגמה, אפשר לעיין במאמר הזה של PR למשחק Freeciv. אחרי המיזוג של ה-PR, אפשר לבטל את כל תיבות הדו-שיח בתוך המשחק על-ידי הקשה על Escape.

סימנייה של בונוס

לא כל האפליקציות או המשחקים שתומכים במצב מסך מלא יהיו בקוד פתוח או יקבלו את התיקונים. אפשר להוסיף את הסימנייה הבאה לסרגל הסימניות וללחוץ כדי להפעיל מצב טוב יותר של מסך מלא.