في هذا الدرس 5تصفّح المواضيع
تقوم معالجة لوحة المفاتيح الحديثة في JavaScript على حدثين قياسيين شاملين: ينطلق keydown فور ضغط أي مفتاح لأسفل (سواء كان حرفاً أو سهماً أو مفتاح تحكم مثل Escape)، وينطلق keyup لحظة رفع الإصبع عن المفتاح.
وإذا أبقى المستخدم إصبعه ضاغطاً على المفتاح، يتكرر انطلاق keydown تلقائياً حاملاً القيمة المنطقية e.repeat === true في كل نبضة تكرار حتى يُختتم بحدث keyup واحد.
تُعد الخاصية النصية e.key الأداة الأساسية الأوضح في معظم التطبيقات؛ فمع مفاتيح الكتابة تُرجع المحرف الفعلي الناتج مع مراعاة لغة لوحة المفاتيح الحالية وحالة مفتاح Shift (مثل "a" أو "A" أو الحرف العربي المقابل).
ومع مفاتيح الأوامر والتنقل غير المطبوعة تُرجع e.key أسماء قياسية مقروءة وواضحة تماماً مثل "Enter" و"Escape" و"Backspace" و"ArrowDown".
const field = document.getElementById('key-input');
const out = document.getElementById('key-display');
field.addEventListener('keydown', function (e) {
out.textContent =
'key=' + e.key + ' | code=' + e.code + ' | rep=' + e.repeat;
});بينما تعبر e.key عن الحرف المنطقي المدخل، تحدد e.code الموقع المادي الفيزيائي للزر على لوحة المفاتيح بغض النظر عن لغة الكتابة النشطة حالياً؛ مما يجعلها منقذة لبرامج المحاكاة والتحكم المكاني حتى لو كانت لوحة المستخدم مضبوطة على العربية:
| الخاصية | ضغط زر A باللغة الإنجليزية | ضغط نفس الزر باللغة العربية | الاستخدام الأنسب هندسياً |
|---|---|---|---|
e.key | "a" (أو "A" مع Shift) | الحرف العربي المقابل للمفتاح | أوامر النصوص ومفتاحي Enter وEscape |
e.code | "KeyA" | "KeyA" ثابتة دائماً | التحكم المكاني مثل WASD وتمييز ShiftLeft عن ShiftRight |
يوفر كائن KeyboardEvent الخصائص المنطقية الأربع e.ctrlKey وe.metaKey وe.altKey وe.shiftKey. ويضمن الجمع الشرطي (e.ctrlKey || e.metaKey) عمل الاختصار بسلاسة لمستخدمي Windows عبر Ctrl ومستخدمي macOS عبر مفتاح Command.
احذر من مصادرة اختصارات المتصفح الأساسية مثل Tab للتنقل، وتجنب تفعيل اختصارات الحرف الواحد أثناء كتابة المستخدم الفعلية داخل حقول النصوص.
const box = document.getElementById('cmd-input');
const status = document.getElementById('cmd-status');
box.addEventListener('keydown', function (e) {
if (e.key === 'Enter' && !e.repeat) {
status.textContent = 'Submitted query: ' + box.value;
} else if (e.key === 'Escape') {
box.value = '';
status.textContent = 'Cleared via Escape.';
}
});اعتمدت الشروحات القديمة قديماً على الحدث keypress وفحص أرقام سحرية مبهمة مثل e.keyCode === 13 أو e.which === 27. وقد أُهملت رسمياً في المعايير الحديثة كل من keypress والخصائص الرقمية keyCode وwhich بسبب تضارب أرقامها بين المتصفحات وأنظمة التشغيل ولوحات المفاتيح العالمية.
يعتمد الكود القياسي الحديث حصراً على keydown وkeyup مع e.key وe.code الواضحتين، ويستخدم حدث input لمتابعة تغير النصوص شاملاً اللصق والإملاء الصوتي.
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس دورة keydown وkeyup وخاصية e.repeat، وقراءة القيمة المنطقية عبر e.key والموقع الفيزيائي عبر e.code، وبناء الاختصارات المتوافقة مع المنصات، واستبدال keypress وkeyCode المهملة. الخطوة التالية: انتقل الآن إلى درس «أحداث النماذج والحقول» لإتقان أحداث input وchange وsubmit.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 event.key قيمة المفتاح المنطقية event.key
- ترجع الحرف الفعلي المدخل حسب لغة اللوحة وحالة Shift أو الاسم القياسي الواضح مثل Enter وEscape.
- للمراجعة
- 02 event.code رمز الموقع الفيزيائي event.code
- تحدد الموقع المادي الثابت للزر على لوحة المفاتيح مثل KeyA بغض النظر عن لغة الكتابة النشطة.
- للمراجعة
- 03 event.repeat خاصية التكرار التلقائي event.repeat
- خاصية منطقية تكون false عند أول ضغطة ثم تصبح true عند استمرار الضغط المتكرر على المفتاح.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 QWERTY QWERTY
- Standard Reference Keyboard Layout
- التخطيط المرجعي القياسي للوحة المفاتيح الذي تُشتق منه أسماء المواقع الفيزيائية في event.code.
- للمراجعة
- 02 IME IME
- Input Method Editor
- محرر طرق الإدخال المركبة في نظام التشغيل الذي ترصده خاصية event.isComposing.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
ضع المؤشر داخل حقل الفحص واضغط حروفاً عادية ومع Shift ومسطرة المسافة والأسهم لملاحظة الفرق بين key وcode.
-
اكتب عبارة في حقل البحث داخل المحرر ثم اضغط Enter لاعتمادها واضغط Escape لتفريغ الحقل فوراً.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.