أداة البحث عن رموز المفاتيح — keyCode و code و key
انقر على منطقة الكشف واضغط أي مفتاح لعرض خصائص أحداث JavaScript فوراً: key وcode وkeyCode وwhich وcharCode وحالة المعدِّلات (Ctrl وAlt وShift وMeta). تتحدث جميع القيم الـ17 في الوقت الفعلي. مثالي لتصحيح معالجات أحداث لوحة المفاتيح.
انقر هنا، ثم اضغط أي مفتاح
كيف تعمل
أحداث لوحة المفاتيح في JavaScript: key وcode وkeyCode
عند ضغط المستخدم لمفتاح، يُطلق المتصفح ثلاثة أحداث بالتسلسل: keydown وkeypress وkeyup. يحمل كل كائن حدث خصائص متعددة تُعرِّف المفتاح المضغوط. أبرزها: key (الحرف أو المفتاح المُسمَّى كـ 'Enter')، وcode (الموقع الفعلي للمفتاح كـ 'KeyA' أو 'ArrowLeft')، وkeyCode (عدد صحيح قديم، مثل 65 لحرف 'A' بصرف النظر عن حالة Shift).
خاصيتا keyCode وwhich أصبحتا قديمتين وفق مواصفة W3C UI Events، لكنهما لا تزالان تُستخدمان على نطاق واسع في قواعد الأكواد القديمة. ينبغي للتطبيقات الحديثة تفضيل key للمعنى الدلالي (ما يُنتجه المفتاح) وcode للموقع الفعلي (أي مفتاح فعلي ضُغط). على سبيل المثال، مفتاح 'A' يُنتج key='a' أو key='A' تبعاً لحالة Shift، لكن code='KeyA' يبقى دائماً ثابتاً.
خاصية location في أحداث لوحة المفاتيح
تُميِّز خاصية location بين المفاتيح الموجودة في أماكن متعددة على لوحة المفاتيح: Ctrl الأيسر مقابل Ctrl الأيمن، وShift الأيسر مقابل Shift الأيمن، والأرقام على لوحة الأرقام مقابل أرقام الصف العلوي. قيم location هي: 0 (قياسي)، و1 (الجانب الأيسر)، و2 (الجانب الأيمن)، و3 (لوحة الأرقام). هذا مفيد بشكل خاص لاكتشاف ما إذا كان المستخدم قد ضغط مفتاح Enter في لوحة الأرقام أم المفتاح الرئيسي.
تُتبَّع مفاتيح المعدِّلات (Ctrl وAlt وShift وMeta) كعلامات منطقية في كل حدث لوحة مفاتيح، ليس فقط عند ضغطها منفردةً. هذا يعني إمكانية اكتشاف توليفات مثل Ctrl+C حتى إذا كنت تستمع أساساً إلى keyCode 67 (C). يقابل مفتاح Meta مفتاح Windows على لوحات مفاتيح Windows ومفتاح Command على أجهزة Mac.
حالات الاستخدام العملية لخصائص أحداث لوحة المفاتيح
تستخدم اختصارات لوحة المفاتيح في تطبيقات الويب مجموعة من code (المفتاح الفعلي) وعلامات المعدِّلات لاكتشاف توليفات مثل Ctrl+S (حفظ) أو Ctrl+Shift+P (لوحة الأوامر). استخدام code بدلاً من key يضمن عمل الاختصار بصرف النظر عن اللغة المحلية للوحة المفاتيح: في تخطيط AZERTY الفرنسي، ينتج المفتاح في موضع 'A' حرفاً مختلفاً، لكن code يظل دائماً 'KeyA'.
تستخدم أدوات التحكم في الألعاب عادةً code لتعيين مفاتيح WASD أو الأسهم للحركة، إذ المهم هو الموقع الفعلي لا الحرف المُنتَج. قد تستمع أدوات إمكانية الوصول إلى Tab (code='Tab') وEnter (code='Enter') لضمان تفعيل العناصر التفاعلية بدون الفأرة. تتيح لك هذه الأداة البحث السريع عن القيم الدقيقة لخصائص أي مفتاح قبل كتابة كود معالج الأحداث.
أسئلة شائعة
›ما الفرق بين keyCode وkey؟
keyCode خاصية عدد صحيح قديمة تُعيِن رقماً لكل مفتاح (مثل 65 لـ'A'، و13 لـEnter). key هو البديل الحديث الذي يُعيد الحرف المُنتَج ('a' أو 'A') أو سلسلة مفتاح مُسمَّى ('Enter' أو 'ArrowLeft'). يجب أن يستخدم الكود الجديد key أو code بدلاً من keyCode.
›ما هي خاصية code؟
تُعرِّف code المفتاح الفعلي المضغوط، بصرف النظر عن تخطيط لوحة المفاتيح أو حالة المعدِّلات. 'KeyA' يُشير دائماً إلى المفتاح في موضع 'A' على لوحة مفاتيح QWERTY، حتى لو تحوَّل المستخدم إلى تخطيط AZERTY حيث يُنتج ذلك المفتاح 'Q'. استخدم code لاختصارات لوحة المفاتيح التي يجب أن تعمل بصرف النظر عن اللغة المحلية.
›لماذا أصبح keyCode قديماً؟
كان keyCode غير متسق عبر المتصفحات وأنظمة التشغيل، وله قيم مختلفة للمفاتيح ذاتها، ولا يتعامل جيداً مع الأحرف غير ASCII. أوقفت مواصفة W3C UI Events استخدامه لصالح key (للحرف/المفتاح المُسمَّى) وcode (للموقع الفعلي). كل من keyCode وwhich محدَّدان الآن كقديمَيْن في المواصفة.
›ماذا تعني قيمة location؟
تُميِّز location المفاتيح التي تظهر في مواضع متعددة. 0 = قياسي (المنطقة الرئيسية)، 1 = مفتاح معدِّل أيسر (مثل Shift الأيسر)، 2 = مفتاح معدِّل أيمن (مثل Ctrl الأيمن)، 3 = لوحة الأرقام. يتيح هذا التمييز بين 5 لوحة الأرقام (code='Numpad5' وlocation=3) و5 الصف العلوي (code='Digit5' وlocation=0).
›كيف أكتشف Ctrl+S أو اختصارات أخرى في JavaScript؟
استمع إلى حدث keydown وتحقق من key/code وعلامات المعدِّلات معاً: `if (e.ctrlKey && e.key === 's') { e.preventDefault(); saveDocument(); }`. يلتقط استخدام e.key === 's' كلاً من الحروف الكبيرة والصغيرة، إذ لا يغيِّر حالة المعدِّل قيمة key لمفاتيح الحروف.
›ما هي خاصية charCode؟
أعاد charCode حدثَ keypress القديم، وكان يُعطي نقطة كود Unicode للحرف المكتوب (مثل 65 لـ'A'). أصبح الآن قديماً مع حدث keypress نفسه. في أحداث keydown/keyup، يكون charCode دائماً 0. استخدم key أو inputType في حدث input بدلاً من ذلك.
›كيف أُميِّز بين مفتاح Enter في لوحة الأرقام والمفتاح الرئيسي؟
كلا المفتاحين يُنتجان key='Enter'، لكنهما يختلفان في code: المفتاح الرئيسي Enter هو code='Enter' مع location=0، بينما Enter لوحة الأرقام هو code='NumpadEnter' مع location=3. تحقق من e.code === 'Enter' للمفتاح الرئيسي أو e.code === 'NumpadEnter' لنسخة لوحة الأرقام.
›ما هو مفتاح Meta؟
مفتاح Meta هو مفتاح Windows على لوحات مفاتيح Windows (⊞) ومفتاح Command على لوحات مفاتيح Mac (⌘). في أحداث لوحة المفاتيح، يُتتبَّع بالعلامة المنطقية metaKey، ويُنتج key='Meta' عند ضغطه منفرداً. code الخاص به إما 'MetaLeft' أو 'MetaRight'.
أدوات ذات صلة
آخر تحديث: