כתיבה זו תדריך אותך לזהות את מפתח הטאב ב-JavaScript.
כיצד לזהות מפתח Tab ב-JavaScript?
כדי לזהות את מפתח הטאב ב-JavaScript, יש ליישם את הטכניקות הבאות:
- ' querySelector() ' שיטה
- ' getElementbyId() ' שיטה
הגישות המוזכרות יודגמו אחת לאחת!
שיטה 1: זיהוי מקש Tab ב-JavaScript באמצעות שיטת document.querySelector()
ה ' document.querySelector() ' השיטה ניגשת לרכיב הראשון התואם לבורר CSS, ולאחר מכן השיטה addEventListener() מוסיפה מטפל באירועים לאלמנט שניגשת אליו. ניתן ליישם שיטות אלו כדי לגשת לסוג הקלט ולזהות אם מקש הטאב נלחץ או לא בעת הזנת הערך שלו.
תחביר
אֵלֵמֶנט. addEventListener ( מִקרֶה , פוּנקצִיָה , useCapture )
בתחביר הנתון, ' מִקרֶה ' מתייחס לשם האירוע, ' פוּנקצִיָה ' היא הפונקציה הספציפית לביצוע כאשר האירוע מתרחש, ו' useCapture ' הוא הטיעון האופציונלי.
מסמך. querySelector ( בוררי CSS )בתחביר לעיל, ' בוררי CSS ” עיין בבורר CSS אחד או יותר שניתן לציין בשיטת document.querySelector() .
עברו על הדוגמה הבאה להבנה טובה יותר של המושג המוצהר.
דוגמא
ראשית, ציין את סוג הקלט כ' טֶקסט ' עם ערך מציין מיקום ראשוני וכותרת ב'
< h2 > תוֹצָאָה < / h2 >
לאחר מכן, החל את ' document.querySelector() ' שיטה לגישה לקלט שצוינו ולכותרת בהתאמה ולאחסן אותם במשתנים בשם ' קֶלֶט ' ו' תוֹצָאָה ”:
לתת קלט = מסמך. querySelector ( 'קֶלֶט' ) ;לתת לתוצאה = מסמך. querySelector ( 'h2' ) ;
כעת, הוסף את ' מקלדת ' אירוע עם שדה הקלט באמצעות שיטת addEventListener() . אירוע זה יודיע למשתמש בכל פעם ש' לשונית מקש ' נלחץ בשדה הקלט על ידי החלת התנאי הבא בעזרת ' innerText ' תכונה:
קֶלֶט. addEventListener ( 'הורדת מקשים' , ( ו ) => {אם ( ו. מַפְתֵחַ === 'כרטיסייה' ) {
תוֹצָאָה. innerText = 'מקש טאב לחוץ' ;
} אַחֵר {
תוֹצָאָה. innerText = 'מקש טאב לא לחוץ' ;
}
במקרה זה, כאשר המשתמש ילחץ על מקש Tab, הנוספת תודיע על הפעולה שבוצעה:
שיטה 2: זיהוי מקש Tab ב-JavaScript באמצעות שיטת document.getElementbyId()
ה ' document.getElementById() ניתן להשתמש בשיטה כדי לגשת לרכיב HTML מסוים בהתבסס על המזהה שלו. ניתן ליישם שיטה זו כדי לקבל את שדה הקלט ולהוסיף אירוע כדי להתריע למשתמש בכל פעם שמקש מסוים נלחץ, כגון מקש Tab.
תחביר
מסמך. getElementById ( אלמנטים )בתחביר הנתון, ' אלמנטים ' מתייחס למזהה של אלמנט שצוין.
בואו נסקור את הדוגמה הבאה.
דוגמא
בדוגמה הבאה, כלול סוג קלט וערך מציין מיקום כפי שנדון בשיטה הקודמת:
כעת, אחזר את מזהה שדה הקלט באמצעות ' document.getElementById() ' שיטה.
let input= document.getElementById('tab');
לבסוף, הוסף אירוע בשם ' מקלדת ' בשיטת addEventListener() שתתריע למשתמש בכל פעם ש' כרטיסייה מקש ' נלחץ:
קֶלֶט. addEventListener ( 'הורדת מקשים' , ( ו ) => {אם ( ו. מַפְתֵחַ === 'כרטיסייה' ) {
עֵרָנִי ( 'מקש טאב לחוץ' ) ;
}
} ) ;
תְפוּקָה
דנו בכל השיטות הפשוטות ביותר לזיהוי מפתח הטאב ב-JavaScript.
סיכום
כדי לזהות מפתח טאב ב-JavaScript, השתמש ב-' addEventListener() ' עם ה ' document.querySelector() ' שיטה לקבלת סוג הקלט והחלת אירוע לזיהוי המפתח שצוין או ' getElementbyId() ' שיטה לאחזרת שדה הקלט בהתבסס על המזהה שלו והודעה למשתמש בכל פעם שהתנאי הנוסף מתקיים. בלוג זה הנחה על זיהוי מפתח טאב ב-JavaScript.