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

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

Thomas Steiner

אם שיחקתם פעם במשחק אינטרנט במסך מלא שהציץ תיבת דו-שיח בתוך המשחק שביטלתם באופן יזום באמצעות מקש Escape, כנראה שנצאתם ממצב מסך מלא. החוויה המתסכלת הזו נובעת מכך שתיבת דו-שיח ומצב מסך מלא 'נלחמים' על המקש Escape. זהו קרב לא שוויוני, כי כברירת מחדל, מצב מסך מלא מנצח תמיד. אבל איך אפשר להפוך את תיבת הדו-שיח למנצחת עבור המפתח Escape? כאן נכנס לתמונה Keyboard Lock 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, הוא עדיין יכול לצאת ממצב מסך מלא. אפשר ליהנות משני העולמות.

הדגמה (דמו)

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

בפועל

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

סימניה בונוס

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