Utilia

Εύρεση κωδικού πλήκτρου (keyCode)

Πατήστε ένα πλήκτρο και δείτε τις τιμές event.key, event.code, keyCode, which και location, τους τροποποιητές, το ιστορικό και πλήρη πίνακα κωδικών πλήκτρων.

Πατήστε «Έναρξη καταγραφής πλήκτρων» ή κάντε κλικ στο παρακάτω πλαίσιο και μετά πατήστε οποιοδήποτε πλήκτρο. Κάντε κλικ έξω από το πλαίσιο για να επιστρέψετε το πληκτρολόγιο στη σελίδα.

event.key Πατήστε ένα πλήκτρο keyCode – Τα Tab, τα βέλη και οι συντομεύσεις καταγράφονται κι αυτά εδώ.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Ενεργά πλήκτρα κλειδώματος
–
Τροποποιητές
ctrlKey shiftKey altKey metaKey
Ιστορικό πλήκτρων (τα πιο πρόσφατα πρώτα)
Ιστορικό πλήκτρων (τα πιο πρόσφατα πρώτα)
ΓεγονόςkeycodekeyCodelocationΤροποποιητέςrepeat
Πίνακας αναφοράς κωδικών πλήκτρων (US QWERTY)

Πίνακας αναφοράς κωδικών πλήκτρων (US QWERTY)
keycodekeyCodelocationΣημείωση

οι τιμές key αφορούν διάταξη US χωρίς τροποποιητές· άλλες διατάξεις παράγουν άλλους χαρακτήρες για το ίδιο code. Τα keyCode και which είναι παρωχημένα αλλά εξακολουθούν να χρησιμοποιούνται ευρέως.

Πώς να βρείτε τον κωδικό ενός πλήκτρου

  1. Πατήστε Έναρξη καταγραφής πλήκτρων ή κάντε κλικ στο μεγάλο πλαίσιο. Ένα έγχρωμο περίγραμμα δείχνει ότι το εργαλείο ακούει.
  2. Πατήστε οποιοδήποτε πλήκτρο ή συντόμευση. Η μεγάλη οθόνη δείχνει την τιμή key και το παλαιό keyCode, ενώ οι κάρτες από κάτω απαριθμούν τα event.key, event.code, event.keyCode, event.which, event.location, event.repeat και τα Ενεργά πλήκτρα κλειδώματος (Caps Lock, Num Lock, AltGraph).
  3. Τα σήματα Τροποποιητές ανάβουν για τα ctrlKey, shiftKey, altKey και metaKey.
  4. Αντιγράψτε το Απόσπασμα JavaScript για αυτό το πλήκτρο. Με το Αντιστοίχιση με επιλέγετε ανάμεσα σε event.key, event.code ή event.keyCode (παλαιό).
  5. Κυλήστε το Ιστορικό πλήκτρων (τα πιο πρόσφατα πρώτα) για να συγκρίνετε πολλές πατήσεις. Επιλέξτε Καταγραφή και των γεγονότων keyup για να βλέπετε και τις αποδεσμεύσεις.
  6. Περιηγηθείτε ή φιλτράρετε τον πίνακα Πίνακας αναφοράς κωδικών πλήκτρων (US QWERTY) όταν χρειάζεστε μια τιμή χωρίς να πατήσετε το πλήκτρο.

Όσο το πλαίσιο έχει εστίαση, η προεπιλεγμένη ενέργεια κάθε πλήκτρου αποκλείεται: τα Tab, τα βέλη, το Backspace ή το Ctrl+S καταγράφονται αντί να μετακινούν την εστίαση ή να ανοίγουν παράθυρο διαλόγου. Κάντε κλικ οπουδήποτε έξω από το πλαίσιο για να επιστρέψετε το πληκτρολόγιο στη σελίδα. Ορισμένες συντομεύσεις τις χειρίζεται το λειτουργικό σύστημα πριν τις δει το πρόγραμμα περιήγησης (Alt+Tab, Ctrl+Alt+Del, Cmd+Tab, συχνά το Print Screen), οπότε καμία ιστοσελίδα δεν μπορεί να τις διαβάσει.

key, code ή keyCode: ποιο να χρησιμοποιήσετε;

Ένα KeyboardEvent μεταφέρει διάφορες τιμές που απαντούν σε διαφορετικά ερωτήματα:

Ιδιότητα Τι σας λέει Παράδειγμα (το πλήκτρο A σε AZERTY)
key Ο χαρακτήρας ή το ονομασμένο πλήκτρο που παράγεται, μετά τη διάταξη και τους τροποποιητές "a", "A" με Shift
code Η φυσική θέση του πλήκτρου, ανεξάρτητα από τη διάταξη "KeyQ"
keyCode / which Ένας παλαιός αριθμός, συνήθως ο κωδικός ASCII του κεφαλαίου γράμματος 65
location 0 κανονικό, 1 αριστερό, 2 δεξί, 3 αριθμητικό πληκτρολόγιο 0

Χρησιμοποιήστε το key όταν μετράει το νόημα: Enter για υποβολή, Escape για κλείσιμο, «?» για άνοιγμα πίνακα βοήθειας. Χρησιμοποιήστε το code για παιχνίδια και συντομεύσεις που εξαρτώνται από τη θέση των πλήκτρων, όπως η κίνηση με WASD, που πρέπει να μένει στο ίδιο σημείο σε γαλλικό AZERTY ή γερμανικό QWERTZ πληκτρολόγιο. Αποφύγετε τα keyCode και which σε νέο κώδικα: είναι παρωχημένα, οι τιμές τους διαφέρουν μεταξύ προγραμμάτων περιήγησης για τα σημεία στίξης (ο Firefox στέλνει 59 για το semicolon (;), ενώ ο Chrome στέλνει 186) και δεν ξεχωρίζουν το αριστερό από το δεξί Shift ή τα δύο Enter. Αξίζει πάντως να τα γνωρίζετε όταν συντηρείτε παλιότερο κώδικα, γι’ αυτό το εργαλείο τα εμφανίζει.

Για το απόσπασμα κώδικα

Ο listener που δημιουργείται ταιριάζει ακριβώς με το πλήκτρο που πατήσατε, μαζί με τα Ctrl, Alt και Meta. Για εκτυπώσιμους χαρακτήρες που αντιστοιχίζονται με το key, το Shift παραλείπεται, επειδή είναι ήδη μέρος της τιμής: το Shift+1 δίνει "!" σε διάταξη US. Όταν πατάτε έναν τροποποιητή μόνο του, το απόσπασμα δεν επαναλαμβάνει τη σημαία του. Θυμηθείτε ότι το metaKey είναι το πλήκτρο Cmd σε Mac και το πλήκτρο Windows σε PC, γι’ αυτό οι συντομεύσεις για πολλές πλατφόρμες ελέγχουν συνήθως event.ctrlKey || event.metaKey.

Συχνές ερωτήσεις

Γιατί το keyCode δείχνει τον ίδιο αριθμό για διαφορετικούς χαρακτήρες;

Το keyCode προσδιορίζει το πλήκτρο, όχι τον χαρακτήρα. Το ψηφίο 1 και το «!» μοιράζονται το 49, και τα «a» και «A» το 65. Διαβάστε το key για να πάρετε τον πραγματικό χαρακτήρα.

Γιατί το πλήκτρο του AZERTY μου εμφανίζεται ως KeyQ;

Το code ονομάζει τα πλήκτρα με βάση τη θέση τους σε πληκτρολόγιο US QWERTY. Το πλήκτρο με το γράμμα A σε γαλλικό πληκτρολόγιο βρίσκεται εκεί όπου το Q σε US, άρα το code του είναι KeyQ ενώ το key του είναι «a».

Τι σημαίνει «Dead» στο event.key;

Είναι νεκρό πλήκτρο, όπως το ^ ή το ¨ σε γαλλικό πληκτρολόγιο, που περιμένει το επόμενο πλήκτρο για να σχηματίσει γράμμα με διακριτικό. Ο τελικός χαρακτήρας παραδίδεται από το επόμενο γεγονός πλήκτρου ή από το γεγονός input ενός πεδίου κειμένου.

Γιατί το event.repeat δείχνει ναι;

Κρατάτε πατημένο το πλήκτρο και το λειτουργικό σύστημα στέλνει αυτόματες επαναλήψεις. Ελέγξτε το event.repeat για να τις αγνοήσετε, για παράδειγμα ώστε μια συντόμευση να ενεργοποιείται μία μόνο φορά.

Καταγράφεται ή στέλνεται κάτι από ό,τι πληκτρολογώ;

Όχι. Τα γεγονότα πλήκτρων τα διαβάζει αυτή η σελίδα στο πρόγραμμα περιήγησής σας και δεν στέλνονται πουθενά. Το ιστορικό χάνεται όταν ανανεώσετε ή εγκαταλείψετε τη σελίδα.