Αυτή η εγγραφή θα σας καθοδηγήσει στον εντοπισμό του κλειδιού tab στο JavaScript.
Πώς να εντοπίσετε το κλειδί καρτέλας στο JavaScript;
Για να εντοπίσετε το κλειδί tab στο JavaScript, εφαρμόστε τις ακόλουθες τεχνικές:
- ' querySelector() 'Μέθοδος
- ' getElementbyId() 'Μέθοδος
Οι αναφερόμενες προσεγγίσεις θα επιδειχθούν μία προς μία!
Μέθοδος 1: Ανίχνευση κλειδιού καρτέλας σε JavaScript με χρήση της μεθόδου document.querySelector()
Ο ' document.querySelector() Η μέθοδος έχει πρόσβαση στο πρώτο στοιχείο που ταιριάζει με έναν επιλογέα CSS και, στη συνέχεια, η μέθοδος addEventListener() προσθέτει έναν χειριστή συμβάντων στο στοιχείο στο οποίο έχει πρόσβαση. Αυτές οι μέθοδοι μπορούν να εφαρμοστούν για πρόσβαση στον τύπο εισόδου και ανίχνευση εάν το πλήκτρο tab πατιέται ή όχι όταν εισάγεται η τιμή του.
Σύνταξη
στοιχείο. addEventListener ( Εκδήλωση , λειτουργία , useCapture )
Στη δεδομένη σύνταξη, ' Εκδήλωση ' αναφέρεται στο όνομα της εκδήλωσης, ' λειτουργία ' είναι η συγκεκριμένη συνάρτηση που πρέπει να εκτελεστεί όταν συμβαίνει το συμβάν και ' useCapture ” είναι το προαιρετικό όρισμα.
έγγραφο. querySelector ( Επιλογείς CSS )Στην παραπάνω σύνταξη, ' Επιλογείς CSS Ανατρέξτε σε έναν ή περισσότερους επιλογείς CSS που μπορούν να καθοριστούν στη μέθοδο document.querySelector().
Ανατρέξτε στο ακόλουθο παράδειγμα για καλύτερη κατανόηση της δηλωμένης έννοιας.
Παράδειγμα
Αρχικά, καθορίστε τον τύπο εισόδου ως ' κείμενο ' με μια αρχική τιμή κράτησης θέσης και μια επικεφαλίδα στο '
< h2 > Αποτέλεσμα < / h2 >
Στη συνέχεια, εφαρμόστε το ' document.querySelector() ' μέθοδος για την πρόσβαση στην καθορισμένη είσοδο και την επικεφαλίδα αντίστοιχα και αποθήκευση στις μεταβλητές με το όνομα ' εισαγωγή ' και ' αποτέλεσμα ”:
αφήστε την εισαγωγή = έγγραφο. querySelector ( 'εισαγωγή' ) ;αφήστε το αποτέλεσμα = έγγραφο. querySelector ( 'h2' ) ;
Τώρα, προσθέστε το ' keydown ” συμβάν με το πεδίο εισαγωγής χρησιμοποιώντας τη μέθοδο addEventListener(). Αυτό το συμβάν θα ειδοποιεί τον χρήστη όποτε το ' αυτί Το πλήκτρο ' πατιέται στο πεδίο εισαγωγής εφαρμόζοντας την ακόλουθη συνθήκη με τη βοήθεια του ' innerText ” ιδιοκτησία:
εισαγωγή. addEventListener ( 'keydown' , ( και ) => {αν ( και. κλειδί === 'Αυτί' ) {
αποτέλεσμα. innerText = 'Πατήθηκε το πλήκτρο Tab' ;
} αλλού {
αποτέλεσμα. innerText = 'Δεν πατήθηκε το πλήκτρο Tab' ;
}
Σε αυτήν την περίπτωση, όταν ο χρήστης θα πατήσει το πλήκτρο tab, το πρόσθετο θα ειδοποιήσει για την ενέργεια που έχει εκτελεστεί:
Μέθοδος 2: Ανίχνευση κλειδιού Tab σε JavaScript χρησιμοποιώντας τη μέθοδο document.getElementbyId()
Ο ' document.getElementById() Η μέθοδος μπορεί να χρησιμοποιηθεί για την πρόσβαση σε ένα συγκεκριμένο στοιχείο HTML με βάση το αναγνωριστικό του. Αυτή η μέθοδος μπορεί να εφαρμοστεί για τη λήψη του πεδίου εισαγωγής και την προσθήκη ενός συμβάντος για να ειδοποιεί τον χρήστη κάθε φορά που πατιέται το συγκεκριμένο πλήκτρο, όπως το πλήκτρο tab.
Σύνταξη
έγγραφο. getElementById ( στοιχεία )Στη δεδομένη σύνταξη, ' στοιχεία ” αναφέρεται στο αναγνωριστικό ενός καθορισμένου στοιχείου.
Ας δούμε γενικά το παρακάτω παράδειγμα.
Παράδειγμα
Στο παρακάτω παράδειγμα, συμπεριλάβετε έναν τύπο εισόδου και μια τιμή κράτησης θέσης όπως συζητήθηκε στην προηγούμενη μέθοδο:
Τώρα, ανακτήστε το αναγνωριστικό πεδίου εισαγωγής χρησιμοποιώντας το ' document.getElementById() μέθοδος.
let input= document.getElementById('tab');
Τέλος, προσθέστε ένα συμβάν με το όνομα ' keydown ' στη μέθοδο addEventListener(), η οποία θα ειδοποιεί τον χρήστη κάθε φορά που το ' Αυτί 'Πατιέται το πλήκτρο:
εισαγωγή. addEventListener ( 'keydown' , ( και ) => {αν ( και. κλειδί === 'Αυτί' ) {
συναγερμός ( 'Πατήθηκε το πλήκτρο Tab' ) ;
}
} ) ;
Παραγωγή
Έχουμε συζητήσει όλες τις απλούστερες μεθόδους για τον εντοπισμό του κλειδιού tab στο JavaScript.
συμπέρασμα
Για να εντοπίσετε το κλειδί tab στο JavaScript, χρησιμοποιήστε το ' addEventListener() ' με το ' document.querySelector() ' μέθοδος για τη λήψη του τύπου εισόδου και την εφαρμογή ενός συμβάντος για τον εντοπισμό του καθορισμένου κλειδιού ή του ' getElementbyId() ” μέθοδος για την ανάκτηση του πεδίου εισαγωγής με βάση το αναγνωριστικό του και την ειδοποίηση του χρήστη κάθε φορά που ικανοποιείται η πρόσθετη συνθήκη. Αυτό το ιστολόγιο καθοδηγεί τον εντοπισμό του κλειδιού καρτέλας στο JavaScript.