ستوجهك هذه الكتابة إلى اكتشاف مفتاح tab في JavaScript.
كيفية اكتشاف مفتاح Tab في JavaScript؟
لاكتشاف مفتاح Tab في JavaScript ، قم بتطبيق الأساليب التالية:
- ' محدد الاستعلام () ' طريقة
- ' getElementbyId () ' طريقة
سيتم عرض الأساليب المذكورة واحدة تلو الأخرى!
الطريقة 1: كشف مفتاح Tab في JavaScript باستخدام أسلوب document.querySelector ()
ال ' document.querySelector () 'يصل إلى العنصر الأول المطابق لمحدِّد CSS ، ثم تضيف طريقة addEventListener () معالج حدث إلى العنصر الذي يتم الوصول إليه. يمكن تطبيق هذه الطرق للوصول إلى نوع الإدخال واكتشاف ما إذا كان المفتاح tab مضغوطًا أم لا عند إدخال قيمته.
بناء الجملة
عنصر. addEventListener ( حدث و وظيفة و useCapture )
في الصيغة المحددة ، ' حدث 'يشير إلى اسم الحدث ،' وظيفة 'هي الوظيفة المحددة التي يجب تنفيذها عند وقوع الحدث ، و' useCapture 'هي الحجة الاختيارية.
وثيقة. الاستعلام ( محددات CSS )في الصيغة أعلاه ، ' محددات CSS 'يشير إلى محدد CSS واحد أو أكثر يمكن تحديده في طريقة document.querySelector ().
راجع المثال التالي للحصول على فهم أفضل للمفهوم المذكور.
مثال
أولاً ، حدد نوع الإدخال كـ ' نص 'مع قيمة عنصر نائب أولية وعنوان في' <ح> ' بطاقة شعار:
< h2 > نتيجة < / h2 >
بعد ذلك ، قم بتطبيق ' document.querySelector () 'طريقة للوصول إلى المدخلات المحددة والعنوان على التوالي وتخزينها في المتغيرات المسماة' الإدخال ' و ' نتيجة ':
اسمحوا الإدخال = وثيقة. الاستعلام ( 'الإدخال' ) ؛اسمحوا النتيجة = وثيقة. الاستعلام ( 'h2' ) ؛
الآن ، أضف ' زر أسفل 'مع حقل الإدخال باستخدام طريقة addEventListener (). هذا الحدث سوف يخطر المستخدم عندما ' التبويب 'في حقل الإدخال من خلال تطبيق الشرط التالي بمساعدة' النص الداخلي ' منشأه:
الإدخال. addEventListener ( 'زر أسفل' و ( و ) => {إذا ( و. مفتاح === 'فاتورة غير مدفوعة' ) {
نتيجة. النص الداخلي = 'مفتاح Tab مضغوط' ؛
} آخر {
نتيجة. النص الداخلي = 'مفتاح Tab غير مضغوط' ؛
}
في هذه الحالة ، عندما يضغط المستخدم على مفتاح tab ، سيُعلم المُضاف بالإجراء الذي تم تنفيذه:
الطريقة 2: اكتشاف مفتاح Tab في JavaScript باستخدام طريقة document.getElementbyId ()
ال ' document.getElementById () ”للوصول إلى عنصر HTML معين بناءً على معرفه. يمكن تنفيذ هذه الطريقة للحصول على حقل الإدخال وإضافة حدث لتنبيه المستخدم عند الضغط على مفتاح معين ، مثل مفتاح tab.
بناء الجملة
وثيقة. getElementById ( عناصر )في الصيغة المحددة ، ' عناصر 'يشير إلى معرف عنصر محدد.
دعونا نلقي نظرة عامة على المثال التالي.
مثال
في المثال أدناه ، قم بتضمين نوع الإدخال وقيمة عنصر نائب كما تمت مناقشته في الطريقة السابقة:
الآن ، قم بإحضار معرف حقل الإدخال باستخدام ' document.getElementById () ' طريقة.
السماح الإدخال = document.getElementById (“علامة التبويب”) ؛
أخيرًا ، أضف حدثًا باسم ' زر أسفل 'في طريقة addEventListener () ، والتي ستنبه المستخدم عندما يكون' فاتورة غير مدفوعة تم الضغط على المفتاح:
الإدخال. addEventListener ( 'زر أسفل' و ( و ) => {إذا ( و. مفتاح === 'فاتورة غير مدفوعة' ) {
إنذار ( 'مفتاح Tab مضغوط' ) ؛
}
} ) ؛
انتاج |
لقد ناقشنا جميع أبسط الطرق لاكتشاف مفتاح Tab في JavaScript.
استنتاج
لاكتشاف مفتاح علامة التبويب في جافا سكريبت ، استخدم ' addEventListener () ' مع ال ' document.querySelector () 'للحصول على نوع الإدخال وتطبيق حدث لاكتشاف المفتاح المحدد أو' getElementbyId () 'لجلب حقل الإدخال بناءً على المعرف الخاص به وإخطار المستخدم عند استيفاء الشرط المضاف. تم توجيه هذه المدونة حول اكتشاف مفتاح tab في JavaScript.