Utilia
الفئات ▾
اللغة: ar ▾

معرفة رمز مفتاح لوحة المفاتيح (keyCode)

اضغط أي مفتاح لتعرف قيم event.key وevent.code وkeyCode وwhich وlocation في JavaScript، مع مفاتيح التعديل وسجل المفاتيح وجدول كامل.

اضغط «ابدأ التقاط المفاتيح» أو انقر المربع أدناه، ثم اضغط أي مفتاح. انقر خارج المربع لإعادة لوحة المفاتيح إلى الصفحة.

event.key اضغط مفتاحًا keyCode – يُلتقط هنا أيضًا مفتاح Tab والأسهم والاختصارات.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
مفاتيح القفل المفعّلة
–
مفاتيح التعديل
ctrlKey shiftKey altKey metaKey
سجل المفاتيح (الأحدث أولًا)
سجل المفاتيح (الأحدث أولًا)
الحدثkeycodekeyCodelocationمفاتيح التعديلrepeat
جدول مرجعي لرموز المفاتيح (US QWERTY)

جدول مرجعي لرموز المفاتيح (US QWERTY)
keycodekeyCodelocationملاحظة

قيم key هي لتخطيط أمريكي دون مفاتيح تعديل؛ التخطيطات الأخرى تُنتج أحرفًا مختلفة للرمز code نفسه. الخاصيتان keyCode وwhich مهملتان لكنهما ما زالتا شائعتي الاستخدام.

كيف تعرف رمز مفتاح في لوحة المفاتيح؟

  1. اضغط ابدأ التقاط المفاتيح أو انقر المربع الكبير. يظهر إطار ملوّن ليدلّ على أن الأداة تستمع.
  2. اضغط أي مفتاح أو اختصار. تعرض الشاشة الكبيرة قيمة key والرقم القديم keyCode، وتسرد البطاقات أسفلها event.key وevent.code وevent.keyCode وevent.which وevent.location وevent.repeat، إضافةً إلى مفاتيح القفل المفعّلة (Caps Lock وNum Lock وAltGraph).
  3. تضيء شارات مفاتيح التعديل عند تفعيل ctrlKey وshiftKey وaltKey وmetaKey.
  4. انسخ مقتطف JavaScript لهذا المفتاح، واستخدم المطابقة حسب للاختيار بين event.key وevent.code وevent.keyCode (قديم).
  5. تصفّح سجل المفاتيح (الأحدث أولًا) لمقارنة عدة ضغطات، وفعّل سجّل أحداث keyup أيضًا لرؤية لحظات تحرير المفاتيح كذلك.
  6. تصفّح الجدول المرجعي لرموز المفاتيح (US QWERTY) أو صفِّه عندما تحتاج إلى قيمة دون أن تضغط المفتاح فعلًا.

ما دام المربع في حالة تركيز، يُمنع الإجراء الافتراضي لكل مفتاح، فيُلتقط Tab والأسهم وBackspace وCtrl+S بدلًا من أن تنقل التركيز أو تفتح نافذة حفظ. انقر في أي مكان خارج المربع لإعادة لوحة المفاتيح إلى الصفحة. بعض الاختصارات يعالجها نظام التشغيل قبل أن يراها المتصفح (Alt+Tab وCtrl+Alt+Del وCmd+Tab، وغالبًا Print Screen)، لذا لا تستطيع أي صفحة ويب قراءتها.

key أم code أم keyCode: أيها تستخدم؟

يحمل الحدث KeyboardEvent عدة قيم تجيب كلٌّ منها عن سؤال مختلف:

الخاصية ماذا تخبرك مثال (مفتاح A في تخطيط AZERTY)
key الحرف أو اسم المفتاح الناتج بعد تطبيق التخطيط ومفاتيح التعديل "a"، و"A" مع Shift
code الموضع الفعلي للمفتاح، بغض النظر عن التخطيط "KeyQ"
keyCode / which رقم قديم، هو عادةً رمز ASCII للحرف الكبير 65
location 0 عادي، 1 يسار، 2 يمين، 3 لوحة الأرقام 0

استخدم key عندما يهمّك معنى المفتاح: Enter للإرسال، وEscape للإغلاق، و«?» لفتح لوحة المساعدة. واستخدم code في الألعاب والاختصارات التي تعتمد على موضع المفاتيح، مثل التحرك بـ WASD، إذ يجب أن تبقى في المكان نفسه على لوحة AZERTY الفرنسية أو QWERTZ الألمانية أو على لوحة عربية. تجنّب keyCode وwhich في الشيفرة الجديدة: فهما مهملتان، وقيمهما تختلف بين المتصفحات في علامات الترقيم (يرسل Firefox القيمة 59 للفاصلة المنقوطة بينما يرسل Chrome القيمة 186)، ولا تميّزان بين مفتاحي Shift الأيسر والأيمن ولا بين مفتاحي Enter. ومع ذلك تبقى معرفتهما مفيدة عند صيانة الشيفرات القديمة، ولهذا تعرضهما الأداة.

عن المقتطف البرمجي

يطابق المستمع المُنشأ المفتاح الذي ضغطته بالضبط، بما في ذلك Ctrl وAlt وMeta. أما الأحرف القابلة للطباعة عند المطابقة حسب key فلا يُضاف إليها Shift لأنه جزء من القيمة أصلًا: فالمفتاحان Shift+1 يعطيان "!" في التخطيط الأمريكي. وعندما تضغط مفتاح تعديل وحده، لا يكرر المقتطف علامته. وتذكّر أن metaKey هو مفتاح Cmd على Mac ومفتاح Windows على الحاسوب الشخصي، لذا تختبر الاختصارات متعددة المنصات عادةً event.ctrlKey || event.metaKey.

الأسئلة الشائعة

لماذا يُظهر keyCode الرقم نفسه لأحرف مختلفة؟

لأن keyCode يعرّف المفتاح لا الحرف. فالرقم 1 وعلامة «!» يشتركان في القيمة 49، والحرفان «a» و«A» في القيمة 65. اقرأ key للحصول على الحرف الحقيقي، وهو ما يعطيك مثلًا الحرف العربي عند استخدام تخطيط عربي.

لماذا يظهر مفتاح AZERTY لديّ باسم KeyQ؟

لأن code يسمّي المفاتيح بحسب موضعها على لوحة US QWERTY. المفتاح المكتوب عليه A في اللوحة الفرنسية يقع حيث يقع Q في اللوحة الأمريكية، لذا يكون رمزه KeyQ بينما قيمة key هي «a». وبالمثل، مفتاح الحرف «ش» في اللوحة العربية رمزه KeyA.

ماذا تعني القيمة «Dead» في event.key؟

إنه مفتاح ميت، مثل ^ أو ¨ في اللوحة الفرنسية، ينتظر المفتاح التالي لتكوين حرف مُشكَّل. يصل الحرف النهائي مع حدث المفتاح التالي أو مع حدث الإدخال في حقل النص.

لماذا تُظهر event.repeat القيمة «نعم»؟

لأنك تُبقي المفتاح مضغوطًا ويرسل نظام التشغيل تكرارات تلقائية. افحص event.repeat لتجاهلها، كأن تريد تنفيذ اختصار مرة واحدة فقط.

هل يُسجَّل ما أكتبه أو يُرسل إلى أي مكان؟

لا. تقرأ هذه الصفحة أحداث المفاتيح داخل متصفحك ولا ترسلها إلى أي مكان. ويختفي السجل عند إعادة تحميل الصفحة أو مغادرتها.

أدوات ذات صلة