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

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

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. מפרט נעילת המקלדת נכתב על ידי גארי קצ'מרצ'יק וג'יימי וולץ'.