أداة معرفة KeyCode في JavaScript
اضغطوا أي مفتاح للحصول على قيم keyCode وkey وcode وwhich الخاصة به
التقاط لوحة المفاتيح
ركّز هنا واضغط على مفتاح
تُلتقط أحداث لوحة المفاتيح داخل هذه المنطقة فقط. يسجّل مفتاح Tab المفتاح وينقل التركيز إلى عنصر التحكم التالي.
للحصول على أحداث لوحة المفاتيح كاملة، استخدم لوحة مفاتيح فعلية. قد لا تتضمن لوحات مفاتيح الجوال بعض الخصائص.
آخر المفاتيح المضغوطة
ستظهر هنا آخر 10 ضغطات مفاتيح.
تفاصيل حدث لوحة المفاتيح
event.keyevent.codeevent.keyCodeمتوقف عن الاستخدامevent.whichمتوقف عن الاستخدامevent.locationevent.repeatمفاتيح التعديل
ركّز على منطقة الالتقاط لفحص حدث لوحة المفاتيح.
حول أداة معرفة KeyCode في JavaScript
تُعد أداة معرفة KeyCode في JavaScript أداة مجانية وتفاعلية للمطورين، تعرض فورًا كل خصائص حدث لوحة المفاتيح عند الضغط على أي مفتاح. سواء كنت تبني اختصارات لوحة المفاتيح أو عناصر تحكم الألعاب أو تنقلًا سهل الوصول، فإن معرفة القيم الدقيقة لكل من event.key وevent.code وevent.keyCode وevent.which أمر أساسي لكتابة JavaScript موثوق يعمل عبر المتصفحات.
تعتمد تطبيقات الويب الحديثة بشكل كبير على معالجة أحداث لوحة المفاتيح في كل شيء، من التحقق من النماذج إلى أدوات التعاون الفوري. تنهي أداة البحث عن رموز المفاتيح هذه التخمين، إذ تعرض رمز المفتاح الفعلي وقيمة المفتاح المنطقية ومعرّف الموضع وجميع حالات مفاتيح التعديل (Shift وCtrl وAlt وMeta) لحظة الضغط على المفتاح، مباشرة في متصفحك ودون أي إعداد.
على عكس جداول مراجع رموز المفاتيح الثابتة، يلتقط مختبر أحداث مفاتيح JavaScript المباشر هذا أحداث المتصفح الفعلية، لتتحقق من السلوك عبر أنظمة التشغيل وتخطيطات لوحة المفاتيح المختلفة. كما يوضح بجلاء الخصائص المهملة، مما يساعدك على كتابة شيفرة تدوم مستقبلًا وتتبع معايير W3C Keyboard Event الحالية.
الميزات الرئيسية
- عرض فوري ومباشر لقيم الخصائص
event.keyوevent.codeوevent.keyCodeوevent.whichوevent.location - مؤشرات مرئية لمفاتيح التعديل تعرض حالات Shift وCtrl وAlt وMeta
- شارات إهمال على الخصائص القديمة مثل keyCode وwhich
- نسخ بنقرة واحدة لقيمة أي خاصية من خصائص الحدث
- تصدير جميع بيانات المفتاح ككائن JSON منسق
- جدول سجل يتتبع آخر 10 ضغطات على المفاتيح للمقارنة
- يميز تلقائيًا بين مواضع المفاتيح اليسرى واليمنى ولوحة الأرقام
- عرض مرئي لمفتاح لوحة المفاتيح لتسهيل التعرف عليه
- يعمل مع كل المفاتيح، بما فيها مفاتيح الوظائف والأسهم والأحرف الخاصة
- تصميم متجاوب بالكامل مع دعم الوضع الداكن
كيفية استخدام أداة معرفة KeyCode في JavaScript
- ركّز على منطقة الإدخال: انقر في أي مكان داخل منطقة الضغط على المفاتيح ذات الإطار المتقطع في أعلى الأداة لتفعيل الاستماع إلى لوحة المفاتيح.
- اضغط على أي مفتاح: اضغط أي مفتاح في لوحة المفاتيح وستظهر جميع خصائص الحدث فورًا في شبكة الخصائص أدناه.
- راجع حالات مفاتيح التعديل: تحقق من مؤشرات Shift وCtrl وAlt وMeta لمعرفة أي مفاتيح تعديل كانت مفعّلة أثناء الضغط على المفتاح.
- انسخ القيم: انقر على أيقونة النسخ بجوار أي خاصية لنسخ قيمتها، أو استخدم زر «نسخ الكل بصيغة JSON» لتصدير جميع الخصائص دفعة واحدة.
- قارن المفاتيح: اضغط عدة مفاتيح بالتتابع ثم مرّر إلى جدول السجل لمقارنة رموزها جنبًا إلى جنب.
- امسح وكرّر: اضغط زر المسح لإعادة تعيين جميع البيانات وبدء جلسة اختبار جديدة.
حالات الاستخدام
- تطوير اختصارات لوحة المفاتيح: حدّد قيم المفتاح والرمز الصحيحة لتنفيذ اختصارات مخصصة في تطبيقات الويب.
- عناصر تحكم الألعاب: اربط المفاتيح الفعلية بإجراءات اللعبة عبر فحص event.code للحصول على ارتباطات مفاتيح لا تتأثر بتخطيط لوحة المفاتيح.
- اختبار سهولة الوصول: تحقق من أن التنقل بلوحة المفاتيح يعمل بشكل صحيح وأن جميع العناصر التفاعلية تستجيب للمفاتيح المتوقعة.
- ترحيل الشيفرة القديمة: اعثر على ما يقابل قيم event.keyCode المهملة في المشاريع القديمة من قيم event.key الحديثة.
- تصحيح الأخطاء عبر المتصفحات: تأكد من أن أحداث المفاتيح تعطي قيمًا متسقة في Chrome وFirefox وSafari وEdge.
- التحقق من نماذج الإدخال: حدّد قيم المفاتيح الدقيقة للسماح بأحرف معينة أو حظرها في الحقول النصية.
- كتابة الشروحات والتوثيق: ابحث بسرعة عن بيانات رموز المفاتيح الدقيقة لإدراجها في أدلة المطورين والمواد المرجعية.
- التمييز بين لوحة الأرقام ولوحة المفاتيح الرئيسية: استخدم خاصية الموضع للتفريق بين مفاتيح لوحة الأرقام ومفاتيح الأرقام العادية.
الأسئلة الشائعة
ما الفرق بين event.key وevent.code؟
event.key تعيد القيمة المنطقية للمفتاح (مثل "a" أو "A" بحسب Shift)، بينما event.code تعيد المفتاح الفعلي على لوحة المفاتيح (مثل "KeyA") بغض النظر عن مفاتيح التعديل أو تخطيط لوحة المفاتيح. استخدم event.key لإدخال الأحرف وevent.code للاختصارات المعتمدة على موضع المفتاح.
هل ما زال استخدام event.keyCode آمنًا؟
event.keyCode مهملة رسميًا من W3C وقد تتصرف بشكل غير متسق عبر المتصفحات. في المشاريع الجديدة استخدم event.key أو event.code. ومع ذلك، ما زالت كثير من قواعد الشيفرة القديمة تعتمد على keyCode، لذلك تعرضه هذه الأداة كمرجع للتوافق مع الإصدارات السابقة.
لماذا يهم حقل الموضع (location)؟
تميز الخاصية event.location بين المفاتيح التي تظهر في أكثر من مكان على لوحة المفاتيح، مثل Shift الأيسر مقابل Shift الأيمن، أو صف الأرقام مقابل لوحة الأرقام. وهذا أمر حاسم للتطبيقات التي تحتاج إلى التفريق بين المفاتيح المكررة.
هل هذه الأداة مجانية؟
نعم، أداة معرفة KeyCode في JavaScript مجانية تمامًا، دون تسجيل أو حدود استخدام أو رسوم خفية. يمكنك استخدامها بالقدر الذي تحتاجه للتطوير والاختبار.
هل بياناتي آمنة؟
بالتأكيد. يتم رصد المفاتيح بالكامل داخل متصفحك باستخدام أحداث لوحة المفاتيح الأصلية في JavaScript. لا يُرسل أي ضغط على المفاتيح ولا بيانات أحداث إلى أي خادم. يبقى إدخالك خاصًا تمامًا على جهازك.
هل تعمل الأداة على الأجهزة المحمولة؟
تعمل الأداة بأفضل شكل مع لوحة مفاتيح فعلية. على الأجهزة المحمولة قد لا تُفعّل لوحة المفاتيح التي تظهر على الشاشة جميع خصائص الحدث بشكل متسق. للحصول على نتائج موثوقة، استخدم حاسوبًا مكتبيًا أو محمولًا، أو صِل لوحة مفاتيح خارجية بجهازك المحمول.
نصائح وأفضل الممارسات
- فضّل event.key لإدخال الأحرف: فهي تراعي تخطيط لوحة المفاتيح واللغة وحالة مفاتيح التعديل تلقائيًا.
- استخدم event.code لعناصر تحكم الألعاب: تبقى مواضع المفاتيح الفعلية ثابتة بغض النظر عن تخطيط لوحة مفاتيح المستخدم (QWERTY وAZERTY وDvorak).
- اختبر دائمًا تركيبات مفاتيح التعديل: اضغط Ctrl+Shift+مفتاح أو Alt+مفتاح للتأكد من أن مستمعي الاختصارات لديك يلتقطون التركيبة الصحيحة.
- افحص جدول السجل بحثًا عن الأنماط: تساعدك مقارنة عدة ضغطات على المفاتيح في اكتشاف التناقضات أو الوصول إلى الرموز الصحيحة بشكل أسرع.
- صدّر JSON للتوثيق: استخدم ميزة «نسخ الكل بصيغة JSON» للصق بيانات المفاتيح الدقيقة مباشرة في تعليقات الشيفرة أو مستندات المطورين.
- اختبر عبر المتصفحات: قد تختلف قيم أحداث المفاتيح بين المتصفحات، خصوصًا للمفاتيح الخاصة. تحقق دائمًا من المتصفحات المستهدفة.