לכוד מפתחות באמצעות ממשק ה-API של נעילת המקלדת

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

Thomas Steiner

יותר ויותר משתמשים מבלים את רוב הזמן שלהם בדפדפן, ולכן אתרים אינטראקטיביים עשירים, משחקים, סטרימינג של שולחן עבודה מרוחק וסטרימינג של אפליקציות שואפים לספק חוויה סוחפת במסך מלא. כדי לעשות את זה, האתרים צריכים גישה למקשים מיוחדים ולמקשי קיצור במקלדת כשהם במצב מסך מלא, כדי שאפשר יהיה להשתמש בהם לניווט, לתפריטים או למשחקים. דוגמאות למקשים שאולי צריך להשתמש בהם: Esc,‏ Alt + Tab,‏ Cmd + ` ו-Ctrl + N.

כברירת מחדל, המקשים האלה לא זמינים לאפליקציית האינטרנט כי הם מתועדים על ידי הדפדפן או מערכת ההפעלה הבסיסית. ‫Keyboard Lock API מאפשר לאתרים להשתמש בכל המקשים הזמינים שמערכת ההפעלה המארחת מאפשרת (ראו תאימות לדפדפנים).

‫Ubuntu Linux מוזרם לכרטיסיית דפדפן ב-macOS Chrome (עדיין לא פועל במצב מסך מלא).
הבעיה: שולחן עבודה מרוחק של Ubuntu Linux שמוזרם לא פועל במצב מסך מלא וללא נעילת מקלדת פעילה, כך שמקשי המערכת עדיין נלכדים על ידי מערכת ההפעלה המארחת של macOS והחוויה עדיין לא סוחפת.

שימוש ב-Keyboard Lock API

ממשק Keyboard של Keyboard API מספק פונקציות להפעלה ולהשבתה של תיעוד לחיצות על מקשים במקלדת הפיזית, וגם לקבלת מידע על פריסת המקלדת של המשתמש.

דרישות מוקדמות

יש שני סוגים של מסך מלא בדפדפנים מודרניים: מסך מלא שמופעל על ידי JavaScript באמצעות Fullscreen API, ומסך מלא שמופעל על ידי המשתמש באמצעות מקש קיצור. ה-API של נעילת המקלדת זמין רק כשמופעל מסך מלא שהופעל על ידי JavaScript. דוגמה למסך מלא שהופעל באמצעות JavaScript:

await document.documentElement.requestFullscreen();

זיהוי תכונות

אפשר להשתמש בתבנית הבאה כדי לבדוק אם יש תמיכה ב-Keyboard Lock API:

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

נעילת המקלדת

השיטה lock() של הממשק Keyboard מחזירה הבטחה אחרי הפעלת הלכידה של הקשות על מקשים כלשהם או על כל המקשים במקלדת הפיזית. בשיטה הזו אפשר לתעד רק מפתחות שקיבלו גישה ממערכת ההפעלה הבסיסית. השיטה lock() מקבלת מערך של קודי מקשים אחד או יותר לנעילה. אם לא מספקים קודי מפתח, כל המפתחות יינעלו. רשימה של ערכי קוד מקשים תקינים זמינה במפרט UI Events KeyboardEvent code Values.

תיעוד כל המקשים

בדוגמה הבאה מתבצעת לכידה של כל הקשות על המקשים.

navigator.keyboard.lock();

תיעוד השימוש במקשים ספציפיים

בדוגמה הבאה מתבצעת לכידה של המקשים W,‏ A,‏ S ו-D. המערכת מתעדת את המקשים האלה בלי קשר למקשי הצירוף שמשמשים ללחיצה על המקש. בהנחה שמשתמשים בפריסת מקלדת QWERTY בארה"ב, רישום של "KeyW" מבטיח שצירופי המקשים W,‏ Shift + W,‏ Control + W,‏ Control + Shift + W וכל שאר צירופי המקשים עם W יישלחו לאפליקציה. אותו הדבר חל על "KeyA",‏ "KeyS" ו-"KeyD".

await navigator.keyboard.lock([
  "KeyW",
  "KeyA",
  "KeyS",
  "KeyD",
]);

אתם יכולים להגיב להקשות שנתפסו באמצעות אירועי מקלדת. לדוגמה, הקוד הזה משתמש באירוע onkeydown:

document.addEventListener('keydown', (event) => {
  if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
    // Do something when the 'A' key was pressed, but only
    // when not in combination with the command or control key.
  }
});

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

השיטה unlock() מבטלת את הנעילה של כל המפתחות שנתפסו על ידי השיטה lock() ומחזירה באופן סינכרוני.

navigator.keyboard.unlock();

כשמסמך נסגר, הדפדפן תמיד קורא באופן מרומז ל-unlock().

הדגמה (דמו)

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

שיקולי אבטחה

בעיה אחת עם ה-API הזה היא שאפשר להשתמש בו כדי לאסוף את כל המקשים (בצירוף Fullscreen API ו-PointerLock API) ולמנוע מהמשתמש לצאת מדף האינטרנט. כדי למנוע את זה, במפרט נדרש שהדפדפן יספק למשתמש דרך לצאת מנעילת המקלדת גם אם כל המקשים נדרשים על ידי ה-API. ב-Chrome, דרך המילוט הזו היא לחיצה ארוכה (שתי שניות) על מקש Esc כדי לצאת מנעילת המקלדת.

תודות

המאמר הזה נבדק על ידי Joe Medley ו-Kayce Basques. מפרט נעילת המקלדת נכתב על ידי Gary Kacmarcik וJamie Walch. תמונה ראשית (Hero) של Ken Suarez ב-Unsplash.