לכוד מפתחות באמצעות ממשק ה-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 ומסך מלא שמופעל על ידי המשתמש באמצעות מקש קיצור. ‫Keyboard Lock API זמין רק כשמסך מלא שמופעל על ידי JavaScript פעיל. דוגמה למסך מלא שמופעל באמצעות JavaScript:

await document.documentElement.requestFullscreen();

זיהוי תכונות

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

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

נעילת המקלדת

ה-method‏ lock() של הממשק Keyboard מחזירה הבטחה אחרי הפעלת תיעוד הלחיצות על המקשים של כל המקשים במקלדת הפיזית או חלק מהם. השיטה הזו יכולה לתעד רק מקשים שמערכת ההפעלה הבסיסית מאפשרת גישה אליהם. ה-method‏ lock() מקבלת מערך של קוד מפתח אחד או יותר לנעילה. אם לא תציינו קודי מפתחות, כל המפתחות יינעלו. רשימה של ערכי קוד מקשים חוקיים זמינה במפרט ערכי קוד KeyboardEvent של אירועי ממשק משתמש.

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

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

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.
  }
});

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

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

navigator.keyboard.unlock();

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

הדגמה (דמו)

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

שיקולי אבטחה

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

תודות

המאמר הזה נבדק על ידי Joe Medley ו-Kayce Basques. המפרט של Keyboard Lock נכתב על ידי גארי קצ'מרצ'יק וג'יימי וולש.