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

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

Thomas Steiner

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

תמיכה בדפדפנים

שימוש ב-Keyboard Lock API

ה-API של נעילת המקלדת זמין בשיטה lock() של הממשק Keyboard ב-navigator.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.

סימנייה נוספת

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