בגרסאות האחרונות של Chrome יש שתי תוספות לפונקציות KeyboardEvent, המשמשות כפרמטר שמועבר אל keydown, keypress ו-keyup פונקציות event listener. גם המאפיין code (שהוספתם ב-Chrome 48) וגם המאפיין key (שהתווסף ב-Chrome 51) מספקים למפתחים דרך פשוטה לקבל מידע שבמצב אחר היה קשה בעזרת מאפיינים מדור קודם.
מאפיין הקוד
הראשון הוא המאפיין code. הערך הזה מוגדר ל-string שמייצג את המקש שעליו לחצת כדי ליצור את KeyboardEvent, בלי לקחת בחשבון את פריסת המקלדת הנוכחית (לדוגמה, QWERTY לעומת Dvorak), את הלוקאל (לדוגמה, אנגלית לעומת צרפתית) או מקשי צירוף כלשהם.
האפשרות הזו שימושית כשאתם רוצים לדעת איזה מפתח פיזי נלחץ, ולא איזה תו הוא תואם לו. לדוגמה, אם אתם כותבים משחק, כדאי שקבוצת מקשים מסוימת תזיז את הנגן לכיוונים שונים, ורצוי שהמיפוי הזה לא יהיה תלוי בפריסת המקלדת.
מאפיין המפתח
לאחר מכן הוספנו את המאפיין key החדש. מוגדר גם כ-string, אבל בעוד ש-code מחזיר מידע על המקש הפיזי שעליו בוצעה הקשה, key מכיל את התו שנוצר על ידי המקש הזה, תוך התחשבות בפריסת המקלדת, במיקום ובמקשי הצירוף הנוכחיים.
בדיקת ערך המאפיין key מועילה כאשר צריך לדעת איזה תו יוצג על המסך, כאילו המשתמש הקליד בקלט טקסט.
מה זה אומר בפועל?
כדי להמחיש דוגמה קונקרטית, נניח שהמשתמש שלך משתמש במקלדת אמריקאית עם פריסת מקלדת QWERTY. לחיצה על המקש הפיזי Q במקלדת הזו תוביל ל-KeyboardEvent עם המאפיין code שמוגדר ל-"KeyQ". הדבר נכון ללא קשר לפריסת המקלדת וגם למקשי צירוף אחרים. לשם השוואה, במקלדת צרפתית (AZERTY), עדיין יהיו מקש זה code של "KeyQ" על אף שהאות שמודפסת על כובע המקשים היא "a".
הקשה על המקש Q הפיזי באותה מקלדת של ארה"ב יוצרת בדרך כלל KeyboardEvent עם key שמוגדר כ-"q" (ללא מקשי צירוף), או "Q" (עם Shift או CapsLock) או "œ" (ב-OS X, עם Alt). במקלדת AZERTY צרפתית, אותו מקש ייצור 'a' (או 'A' עם Shift או CapsLock). ובפריסות מקלדת אחרות, הערך של key יכול להיות "й", "ض", "ㅂ", "た" או כל תו אחר.
אם נחזור לדוגמה של המשחק הקודם, אם רוצים להשתמש במקשים של WASD לתזוזה, אפשר להשתמש במאפיין code ולבדוק את המאפיינים "KeyW", "KeyA", "KeyS" ו-"KeyD". האפשרות הזו תפעל בכל המקלדות ובכל הפריסות – אפילו מקלדות AZERTY שמחליפות את המיקום של המקשים "w" ו-"z".
מקלדות וירטואליות
אתם יכולים לראות שעד עכשיו התמקדנו בהתנהגות של מקלדת פיזית. מה לגבי משתמשים שמקלידים במקלדת וירטואלית או במכשיר קלט חלופי? המפרט כולל הנחיות רשמיות לגבי המאפיין code. לסיכום, מקלדת וירטואלית שמחקה את הפריסה של מקלדת רגילה תוביל להגדרה של מאפיין code מתאים, אבל מקלדות וירטואליות שמשתמשות בפריסות לא מסורתיות עלולות לגרום לכך שלא תתבצע הגדרה של code בכלל.
התהליך פשוט יותר לגבי המאפיין key, שאותו אפשר לצפות להגדיר כמחרוזת שמבוססת על התו שהמשתמש הקליד (באופן וירטואלי).
אני רוצה לנסות
גארי קיצ'מארצ'יק (Gary Kačmarčík) הכין הדגמה מדהימה להמחשת כל המאפיינים שמשויכים לערכי KeyboardEvent:
תמיכה בדפדפנים שונים
נכון לעכשיו, התמיכה במאפיין code מוגבלת לדפדפנים Chrome 48 ומעלה, Opera 35 ומעלה ו-Firefox 44 ומעלה.
המאפיין key נתמך ב-Firefox 44 ומעלה, Chrome 51 ומעלה ו-Opera 38 ומעלה, עם תמיכה חלקית ב-Internet Explorer 9 ומעלה וב-Edge 13 ומעלה.