أحداث مفاتيح JavaScript هي أمر مربك — إليك مرجع المفاتيح الذي سترى ملصقًا

في بعض الأوقات من مسيرتك في لغة JavaScript، تجلس لتتعامل مع ضغط زر. هذا أمر بسيط. تفتح MDN، وتجد ليس واحدًا، ليس اثنين، بل أربعة خصائص يمكن استخدامها: keyCode, which, keyو، و codeثلاثة منها مُستبعدة. لا تتفق أي من هذه الخصائص على ما هو "مفتاح". مبروك - لقد وصلت إلى أحد أصعب الأماكن التاريخية في الويب.

يُقدم هذا المرجع توضيحًا يقطع الضوضاء. ستجد ما هي الخصائص التي يجب استخدامها، وما هي التي يجب تجنبها، وستحصل على جدول كامل لقيم المفاتيح الشائعة بحيث لا تُفترض.

الخصائص الأربعة — وسبب وجودها الأربعة

تُعرض خصائص عدة على كائن الحدث في أحداث لوحة المفاتيح باللغة JavaScript. إليك ما يمثله كل خاصية:

ملكية	ما يُرجعه	حالة
event.key	نص بسيط قابل للقراءة مثل "Enter", "ArrowUp"، أو "a"	✅ استخدم هذا
event.code	معرّف المفتاح الفيزيائي، مثال: "KeyA", "Digit1", "ArrowLeft"	✅ استخدم هذا للتحقق من التصميم دون الاعتماد على الترتيب
event.keyCode	كود رقمي، مثال: 13 لـ Enter	⚠️ مُستبعد - تجنب استخدامه في الكود الجديد
event.which	نفس القيمة الرقمية كـ keyCode	⚠️ مُستبعد - تجنب استخدامه في الكود الجديد

keyCode و which هي في الحقيقة نفس الشيء من عصور مختلفة في تاريخ المتصفحات. كلاهما يُرجع رقمًا يمثل المفتاح. كلاهما مُستبعد. كلاهما يعمل في كل متصفح، وهذا هو السبب الذي يجعلك تجد كودًا قديمًا في مشاريع تعود إلى قبل عام 2015.

لماذا keyCode مُستبعد لكنه موجود في كل مكان

keyCode كانت الطريقة الأصلية للكشف عن ضغط المفاتيح في نموذج DOM للمتصفح، وتاريخها يعود إلى نموذج المتصفحات المبكرة من نتسايك. كانت تعمل - بشكل عام - لكنها كانت تمتلك تناقضات خطيرة: يمكن أن يُرجع نفس المفتاح أرقامًا مختلفة في متصفحات مختلفة، ولم يتم التعامل مع الحروف المُسَمَّاة بشكل موحد، وكانت المفاتيح غير الأصلية (غير الأحرف الأصلية) مُضطربة.

أُستبعد رسميًا من قبل keyCode و which في مواصفة DOM Level 3 Events (2016) في مصلحة key و code. لكن استبعادها يعني "نوصي أن توقف استخدامها"، وليس "نُخطط لانهيار موقعك". يدعم المتصفحات هذا المعيار وربما سيستمر في الدعم لفترة طويلة.

النتيجة: توجد كودات قديمة ممتلئة بـ event.keyCode === 13 مراجعات، توصيات على موقع ستيك أوف لعام 2012 تُوصي به، وستجد هذا في كود الإنتاج في كل مكان. لن يختفي قريبًا - فقط لا تكتب كود جديد يستخدمه. مُقارنة مع

event.key — أي منهما تحتاجه؟ event.code التمييز هنا هو ما يُسبب ارتباكًا لمعظم الناس. كلاهما حديث وصحيح - لكنهما يجيبان على أسئلة مختلفة.

عندما تهتم بـ ما هو المفتاح الذي قصدتهه المستخدم. على لوحة مفاتيح من نوع الولايات المتحدة، الضغط على Shift + 2 يعطيك

• استخدم event.key . على لوحة مفاتيح ألمانية، نفس المفتاح الفيزيائي يعطيك حرف مختلف. event.key === "@"يعكس الحقيقة المُرادية. event.key عندما تهتم بالمفتاح الفيزيائي المُضغوط، بغض النظر عن التصميم. هذا هو ما تريده لتحكمات الألعاب، أو مفاتيح سريعة لا ينبغي أن تتغير مع لغة المستخدم، أو أي شيء يُعني "مفتاح Q" يعني المفتاح الأعلى اليسار - وليس الحرف Q.
• استخدم event.code لأغراض استخدام عامة - مثل إرسال نماذج، إغلاق مربعات، أو مفاتيح سريعة -

هو ما تريده. أما بالنسبة لتحكمات الألعاب أو المفاتيح المبنية على الموضع، فاستخدم event.key التعامل الصحيح مع المفاتيح في JavaScript الحديث event.code.

إليك كيفية التعامل مع الحالات الشائعة بشكل صحيح:

مفتاح Enter (إدخال نموذج، إغلاق مربعات تأكيد)

مفتاح Escape (إغلاق المربعات، إلغاء الإجراءات)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // handle Enter
  }
});

مفاتيح الأسهم (التنقل، التحكم بالمُسَلّم، التحكم في الألعاب)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});

مفاتيح المُساعدين (Ctrl+S، Cmd+K، إلخ)

document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowUp':    moveUp();    break;
    case 'ArrowDown':  moveDown();  break;
    case 'ArrowLeft':  moveLeft();  break;
    case 'ArrowRight': moveRight(); break;
  }
});

(Cmd على Mac) للكشف عن مجموعات المفاتيح. هذه المفاتيح ليست مُستبعدة وتعمل تمامًا كما هو مطلوب.

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

استخدم e.ctrlKey, e.shiftKey, e.altKeyو، و e.metaKey جدول مُكتمل لقيم المفاتيح

يغطي الجدول أدناه المفاتيح التي تستخدمها غالبًا. بالنسبة لأي مفتاح غير مذكور هنا، استخدم أداة

معلومة عن المفتاح - اضغط على أي مفتاح وستحصل على القيمة الدقيقة والمعلومات الوراثية الفورية. event.key, event.codeevent.key keyCode event.code

مفتاح	keyCode (مُستبعد)	(space)	Backspace
أدخل	"Enter"	"Enter"	13
هروب	"Escape"	"Escape"	27
فضاء	" " Delete	"Space"	32
فاتورة غير مدفوعة	"Tab"	"Tab"	9
Arrow Up	"Backspace"	"Backspace"	8
Arrow Down	"Delete"	"Delete"	46
Arrow Left	"ArrowUp"	"ArrowUp"	38
Arrow Right	"ArrowDown"	"ArrowDown"	40
Page Up	"ArrowLeft"	"ArrowLeft"	37
Page Down	"ArrowRight"	"ArrowRight"	39
بيت	"Home"	"Home"	36
نهاية	"End"	"End"	35
F1	"PageUp"	"PageUp"	33
F2	"PageDown"	"PageDown"	34
F3	"F1"	"F1"	112
F4	"F2"	"F2"	113
F5	"F3"	"F3"	114
F6	"F4"	"F4"	115
F7	"F5"	"F5"	116
F8	"F6"	"F6"	117
F9	"F7"	"F7"	118
F10	"F8"	"F8"	119
F11	"F9"	"F9"	120
F12	"F10"	"F10"	121
Shift (left)	"F11"	"F11"	122
Ctrl (left)	"F12"	"F12"	123
Alt (left)	"Shift"	"ShiftLeft"	16
Cmd / Win	"Control"	"ControlLeft"	17
Caps Lock	"Alt"	"AltLeft"	18
a–z (lowercase)	"Meta"	"MetaLeft"	91
–	"CapsLock"	"CapsLock"	20
65–90	"a"0–9 (top row)"z"	"KeyA"0–9 (top row)"KeyZ"	48–57
0–9 (numpad)	"0"0–9 (top row)"9"	"Digit0"0–9 (top row)"Digit9"	96–105
مفتاح الكود الذي لا يمكنك تذكره؟ ابحث عنه فورًا	"0"0–9 (top row)"9"	"Numpad0"0–9 (top row)"Numpad9"	لا توجد جدول مرجعي يغطي كل المفاتيح لكل ترتيب لوحة المفاتيح. عندما تحتاج إلى القيم الدقيقة لمفتاح لا تعرفه - مثل مفتاح لوحة الأرقام، أو مفتاح وسائط، أو حرف من مناطق معينة - فإن الطريقة السريعة هي الضغط عليه ورؤية النتيجة.

يقوم تمامًا بذلك. اضغط على أي مفتاح وسترى فورًا

إضافة إلى حالة المُساعدين. لا حاجة لنسخ نص من MDN، ولا حاجة لتخمين ما يُسمى "NumpadEnter" بالفعل.

ال - اضغط على أي مفتاح وستحصل على القيمة الدقيقة النسخ المختصر event.key, event.code, event.keyCodeو، و event.which لأغلب حالات التعامل مع لوحة المفاتيح - هو قابل للقراءة، حديث، وله الوعي للمنطقة.

عندما يهم الموضع الفيزيائي للمفتاح أكثر من الحرف (أمثلة: التحكم في الألعاب، أو المفاتيح المبنية على الموضع).

• استخدم event.key توقف عن كتابة كود جديد يستخدم
• استخدم event.code . تعمل، لكنها مُستبعدة وقليلة التنبؤ.
• عندما تجد كودًا قديمًا يستخدم event.keyCode أو event.which، فهذا يعني Enter.
• يعني Escape. الجدول أعلاه يحتوي على الباقي. keyCode === 13لأي مفتاح لا تجد في أي مرجع، اضغط عليه في keyCode === 27 وستحصل على الإجابة فورًا.
• مُضيّعات أحداث المفاتيح في JavaScript - إليك المرجع المُستخدم للاحتفاظ به 2 - اضغط على أي مفتاح وستحصل على القيمة الدقيقة مُضيّعات أحداث المفاتيح في JavaScript - إليك المرجع المُستخدم للاحتفاظ به 1

قد يعجبك أيضاً