شهدت الإصدارات القليلة السابقة من Chrome إضافتَين إلى KeyboardEvent
، ويتم استخدامهما كمَعلمة تم تمريرها إلى أدوات معالجة أحداث keydown
وkeypress
وkeyup
. إنّ السمتَين code
(تمّت إضافتهما في Chrome 48) والسمة key
(تمّت إضافتهما في Chrome 51) يوفّران للمطوّرين طريقة مباشرة للحصول على معلومات يصعب استخدامها باستخدام السمات القديمة.
سمة الرمز
السمة code
الأولى هي. يتم ضبط هذه السمة على سلسلة تمثّل المفتاح الذي تم الضغط عليه لإنشاء KeyboardEvent
، بدون استخدام التنسيق الحالي للوحة المفاتيح (على سبيل المثال، QWERTY مقابل Dvorak)، أو اللغة (مثلاً، الإنجليزية مقابل الفرنسية)، أو أي مفاتيح تعديل.
يمكنك الاستفادة من هذه الميزة عندما تهتم بالمفتاح الفعلي الذي تم الضغط عليه بدلاً من الحرف الذي يتوافق معه. على سبيل المثال، إذا كنت تكتب لعبة، فقد تحتاج إلى مجموعة معينة من المفاتيح لتحريك اللاعب في اتجاهات مختلفة، ومن الأفضل أن يكون هذا التعيين مستقلاً عن تخطيط لوحة المفاتيح.
السمة الرئيسية
بعد ذلك، لدينا السمة key
الجديدة. ويتم ضبطها أيضًا على سلسلة، ولكن مع أنّ السمة 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
، ومن المفترض أن يتم ضبطها على سلسلة استنادًا إلى الحرف الذي كتبه المستخدم (افتراضيًا).
التجربة الآن
أعدّ "غاري كاتشماركيك" عرضًا توضيحيًا رائعًا يعرض جميع السمات المرتبطة بـ KeyboardEvent
:
التوافق مع المتصفحات
اقتصر استخدام السمة code
، اعتبارًا من هذه الكتابة، على Chrome 48 والإصدارات الأحدث وOpera 35 والإصدارات الأحدث.
تتوفّر السمة key
في Firefox 44 والإصدارات الأحدث، وChrome 51 والإصدارات الأحدث، وOpera 38 والإصدارات الأحدث، مع دعم جزئي في الإصدارين 9 من Internet Explorer والإصدارات الأحدث.