عارض رموز المفاتيح

ما هو عارض رموز المفاتيح؟#

حين يُضغط مفتاح، يُطلق المتصفّح KeyboardEvent يحمل جوابَين متوازيَين عن سؤال «أيّ مفتاح؟». حقل key يقول أيّ محرف أنتج الضغط — a وA وEnter و?. وحقل code يقول أيّ مفتاح فيزيائيّ ضُغط — KeyA وEnter وSlash — مستقلًّا عن التخطيط. وهذان الجوابان يتباعدان لحظة تُدخل لوحة مفاتيح دولية أومُعدِّلًا أولوحة أرقام، والفرق هو بالضبط ما تحتاج رؤيته حين تُسلك اختصارًا أوتحكّم لعبة أوميزة وصول.

تُلتقط هذه الصفحة كلّ keydown في لقطة وتُجرد كلّ حقل: key وcode، ورقمَا keyCode وwhich العتيقان (محفوظان لتنقيح كودٍ أقدم)، وlocation (قياسيّ / يسار / يمين / لوحة أرقام)، والمُعدِّلات الفاعلة، وهل كان الضغط تكرارًا تلقائيًّا. يبقى سجلٌّ متجدّد لآخر الضغطات ظاهرًا لتتتبّع وترًا أوتسلسلًا.

لا شيء عامّ: يقع الالتقاط فقط بينما التركيز داخل منطقة الالتقاط، فيتابع بقية الصفحة إطاعة لوحة المفاتيح بشكل طبيعيّ.

كيفية الاستخدام#

1. انقر في أيّ مكان داخل منطقة الالتقاط المتقطّعة في الأعلى (أوانتقل إليها بـ Tab). تُظلَّل لتُظهر أنّها تُنصِت.
2. اضغط مفتاحًا، أورمزًا. يتحدّث جدول اللقطات بالأسفل عند كلّ keydown.
3. اقرأ الصفوف:
   • key — قيمة المفتاح المنطقية (المحرف أوالمفتاح المُسمَّى الذي حلّله المتصفّح).
   • code — المفتاح الفيزيائيّ، مستقلّ عن التخطيط. هذا ما تطابِق عليه الاختصارات.
   • keyCode وwhich — الرموز الرقمية المُهمَلة، مع شارة عتيق. طابِقها فقط عند نقل كودٍ قديمّ لا يزال يقرؤهما.
   • location — standard أوleft أوright أوnumpad. هكذا تميّز Shift اليسرى من اليمنى، أوNumpad 5 من 5 في الصف العلوي.
   • repeat — yes أثناء احتجاز مفتاح وتكراره تلقائيًّا.
   • modifiers — شارات لأيٍّ من Ctrl وAlt وShift وMeta كان محتجزًا.
4. فعّل منع الافتراضيّ في شريط الخيارات إن أردت منع الصفحة المتصفّح من التصرّف وفق المفتاح (مثلًا لمنع Tab من سحب التركيز بعيدًا وأنت تختبر).
5. استخدم نسخ لأخذ اللقطة الحالية، ومسح في لوحة السجل لإعادة تعيين القائمة المتجدّدة.

الميزات الرئيسية#

• key وcode جنبًا إلى جنب. التمييز الأنفع في معالجة لوحة المفاتيح، جُعل ظاهرًا على كلّ ضغطة — فترى فورًا لماذا يأتي key === "@" من Shift+Digit2 على تخطيط ومن مفتاح فيزيائيّ مختلف كليًّا على آخر.
• الوعي بالموضع. تُبلَّغ المُعدِّلات اليسرى واليمنى منفصلة، ومفاتيح لوحة الأرقام تحمل location: numpad. ضروريّ لتخطيطات الألعاب حيث يعني الرقم نفسه أشياء مختلفة على الصف الرئيسيّ مقابل لوحة الأرقام.
• شارات المُعدِّلات. Ctrl وAlt وShift وMeta (Command على macOS، Super/Windows في مكان آخر) معروضة بالترتيب التقليديّ، فتقرأ وترًا بنظرة.
• حقول عتيقة، مُعلَّمة بوضوح. keyCode وwhich مهملتان ومُزالتان من المواصفات الحديثة، لكنّ كثيرًا من الكود القائم لا يزال يقرؤهما. تُسطَّران بشارة عتيق مرئية وحاشية، لا كإجابة أولى قطّ.
• سجلٌّ متجدّد بعشرين. احتجز مفتاحًا وراقب repeat تقلب إلى yes مع كلّ إطلاق تلقائيّ؛ واضغط تسلسلًا وامشِ عبره. كلّ مدخل لقطة معزولة.
• التقاط محدود النطاق. المُنصِت مرتبط بمنطقة الالتقاط لا بالنافذة. يستمرّ بقية الصفحة — التنقّل والتمرير — في العمل حتى تُركّز المنطقة ثانية.

مثال عملي#

مصدرُ لبسٍ كلاسيكيّ هو الفرق بين 1 في الصف العلويّ و1 في لوحة الأرقام. يُنتجان المحرف نفسه، لكنّهما ليسا المفتاح نفسه.

اضغط 1 في الصف العلويّ فتقرأ اللقطة:

key        1
code       Digit1
keyCode    49      (legacy)
which      49      (legacy)
location   standard
repeat     no
modifiers  none

الآن اضغط 1 في لوحة الأرقام (مع تفعيل Num Lock) فتقرأ اللقطة:

key        1
code       Numpad1
keyCode    97      (legacy)
which      97      (legacy)
location   numpad
repeat     no
modifiers  none

key نفسه، لكنّ code مختلف، وlocation مختلف، ورمز عتيق مختلف. فإن كنت تربط اختصارًا، تطابِق على code === "Digit1" لتعني «الصف فوق الحروف»، وعلى code === "Numpad1" لتعني «لوحة الأرقام» — وتتجنّب فخّ المطابقة على key === "1" الذي يُطلق لكليهما.

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

هل أطابِق على key أم على code؟#

يتوقّف على ما تبنيه. طابِق على code للاختصارات وتحكّم الألعاب، حيث الموضع الفيزيائيّ للمفتاح يهمّ ولا تريد أن يتغيّد الربط حين يبدّل المستخدم إلى Dvorak أوتخطيط غير لاتيني. وطابِق على key لإدخال النصّ، حيث المحرف المُنتَج هو ما تهتمّ به (? مقابل /، أومحارف مُركَّبة بمفاتيح ميتة). لأوتار المُعدِّلات، افحص رايات المُعدِّل (ctrlKey وmetaKey…) لا قيمة key الخاصةّ بالمُعدِّل نفسه.

لماذا يُعلَّم keyCode وwhich بـ«عتيق»؟#

لأنهما مهملان ومُزالان من مواصفة UI Events. ما يزال المتصفّح يملؤهما للتوافق، لكنّ قيمهما لم تكن متّسقة عبر المتصفّحات أوالتخطيطات قطّ (المفتاح الفيزيائيّ نفسه قد يُبلّغ عن أرقام مختلفة). الكود الحديث ينبغي أن يقرأ key وcode. وهما معروضان هنا فقط لتُنقّح أوتنقل كودًا أقدم لا يزال يعتمد على الأرقام — لا تستخدمهما لروابط جديدة قطّ.

لا تلتقط الصفحة ضغطاتي. لماذا؟#

الالتقاط محدود النطاق بالمنطقة المتقطّعة. فإن انتقل التركيز إلى مكانٍ آخر — لأنك خرجت بـ Tab، أونقرت تحكّمًا آخر — تتوقّف المنطقة عن الإصغاء. انقر داخل المنطقة ثانية (ستُظلَّل) فتُسجَّل الضغطات من جديد. وهذا التحديد متعمَّد: يبقي بقية الصفحة قابلة للوصول بلوحة المفاتيح.

هل مفتاح Meta يعني Command أم Windows؟#

كلاهما — Meta مفتاح «السوبر» الخاصّ بالمنصّة: Command على macOS، ومفتاح Windows / Super على Linux وWindows. وتقرأ الشارة Meta بدلًا من تخمين نظام التشغيل، لأنّ حقل metaKey الكامن هو ما يحتاج كودك فحصه فعلًا.