انتقل إلى محتوى الدرس

Keyboard Shortcuts Modifier Keys برمجة اختصارات لوحة المفاتيح

أتقن أحداث لوحة المفاتيح في JavaScript عبر keydown وkeyup، وميّز بدقة بين event.key المنطقية وevent.code الفيزيائية، وبرمج الاختصارات بعيداً عن keyCode القديمة.
3 صفوف تعليمية
جافا سكريبت
6 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يوفر كائن KeyboardEvent الخصائص المنطقية الأربع e.ctrlKey وe.metaKey وe.altKey وe.shiftKey. ويضمن الجمع الشرطي (e.ctrlKey || e.metaKey) عمل الاختصار بسلاسة لمستخدمي Windows عبر Ctrl ومستخدمي macOS عبر مفتاح Command.

احذر من مصادرة اختصارات المتصفح الأساسية مثل Tab للتنقل، وتجنب تفعيل اختصارات الحرف الواحد أثناء كتابة المستخدم الفعلية داخل حقول النصوص.

الصف 2 كود برمجي
JavaScript
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.';
  }
});
الصف 3 ملاحظة هامة