شهدت الإصدارات القليلة الماضية من Chrome إضافة مَعلمتَين إلى KeyboardEvents، والتي تُستخدَم كمَعلمة يتم تمريرها إلى معالجات أحداث 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 على الإصدار 48 من Chrome والإصدار 35 من Opera والإصدار 44 من Firefox والإصدارات الأحدث.
تتوفّر السمة key في الإصدار 44 من Firefox والإصدار 51 من Chrome والإصدار 38 من Opera والإصدارات الأحدث، مع إتاحة جزئية في الإصدار 9 من Internet Explorer والإصدار 13 من Edge والإصدارات الأحدث.