Πώς να προσθέσετε συντομεύσεις πληκτρολογίου στον ιστότοπό σας

Αγαπώ συντομεύσεις πληκτρολογίου; Μπορούν να σας βοηθήσουν να εξοικονομήσετε πολύ χρόνο, σωστά; Θα θέλατε να προσθέσετε συντομεύσεις πληκτρολογίου στην ιστοσελίδα σας, προς όφελος των επισκεπτών σας; Θα βελτιώσει σημαντικά την προσβασιμότητα και την πλοήγηση του ιστότοπού σας.

Σε αυτήν την ανάρτηση, θα σας δώσω έναν γρήγορο οδηγό για το πώς να προσθέσετε συντομεύσεις στην ιστοσελίδα σας χρησιμοποιώντας μια βιβλιοθήκη JavaScript που ονομάζεται Ποντικοπαγίδα. Με το Ποντικοπαγίδα μπορείτε προσδιορίστε τα κλειδιά όπως Shift, Ctrl, Alt, Επιλογές και Command to να εκτελείτε συγκεκριμένες λειτουργίες στον ιστότοπό σας. Λειτουργεί επίσης καλά σε παλαιότερα προγράμματα περιήγησης.

Περισσότερα για το Hongkiat:

• Δημιουργία κινουμένων σχεδίων εύκολα με το Hint.Css
• Δημιουργία οδηγού βήμα προς βήμα με τη χρήση του Intro.Js [Tutorial]
• Πώς να ρυθμίσετε το ρυθμιστικό εύρους τιμών HTML5
• Πώς να χρησιμοποιήσετε την τοπική αποθήκευση cookie & HTML5

Ξεκινώντας

Ξεκινήστε δημιουργώντας ένα νέο έγγραφο HTML μαζί με το περιεχόμενο και συνδέοντας τη βιβλιοθήκη Ποντικογράφημα. Θα χρησιμοποιήσω τη βιβλιοθήκη Mousetrap που φιλοξενείται σε CDNjs έτσι ώστε η βιβλιοθήκη θα εξυπηρετείται μέσω του δικτύου CloudFlare, το οποίο θα πρέπει να είναι γρηγορότερο από το δικό μας διακομιστή

Τώρα θα χρησιμοποιήσουμε το Ποντικοπαγίδα 'δένω' μέθοδος για την προσθήκη πλήκτρων πληκτρολογίου με λειτουργία. Μπορείτε να εκχωρήσετε ένα μόνο πλήκτρο, ένα συνδυασμό πλήκτρων ή πλήκτρα αλληλουχίας, για παράδειγμα

Ενιαίο κλειδί

Σε αυτό το παράδειγμα δεσμεύουμε το s.

 Mousetrap.bind ('s', λειτουργία (e) // τη λειτουργία σας εδώ ...); 

Πλήκτρο συνδυασμού

Σε αυτό το παράδειγμα, δεσμευόμαστε τα Ctrl και s. Θα χρειαστεί να πατήσετε τα δύο κουτάκια για να εκτελέσετε την καθορισμένη λειτουργία.

 Mousetrap.bind ('ctrl + s', λειτουργία (e) // λειτουργία εδώ ...); 

Κλειδί αλληλουχίας

Σε αυτό το παράδειγμα, ο χρήστης θα πρέπει να πατήσει g και στη συνέχεια μικρό ακολούθως. Εάν αναπτύσσετε web-based παιχνίδι αυτό μπορεί να είναι χρήσιμο για την προσθήκη ενός μυστικού combo κρυμμένου κλειδιού.

 Mousetrap.bind ('g s', λειτουργία (e) // λειτουργία εδώ ...); 

Χρησιμοποιώντας το Ποντικοπαγίδα

Θα δημιουργήσουμε μια απλή ιστοσελίδα με μερικές συντομεύσεις πληκτρολογίου που θα επιτρέπουν στους χρήστες να έχουν πρόσβαση σε κάποια λειτουργικότητα στον ιστότοπο. Θα χρησιμοποιήσουμε το jQuery για να διευκολύνουμε τον χειρισμό του εγγράφου HTML και την επιλογή στοιχείων HTML.

Ας ξεκινήσουμε με κάτι εύκολο.

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

1. Το παρακάτω είναι το σημάδι HTML για την αναζήτηση μαζί με το ταυτότητα.

2. Στη συνέχεια, δημιουργούμε μια λειτουργία που θα επικεντρωθεί στην είσοδο αναζήτησης.

 Αναζήτηση λειτουργίας () var search = $ ('# αναζήτηση'); αναζήτηση.val ("); search.focus (); 

3. Τέλος, συνδέουμε ένα κλειδί για να εκτελέσουμε τη λειτουργία.

 Mousetrap.bind ('/', αναζήτηση); 

4. Αυτό είναι. Θα πρέπει τώρα να πλοηγηθείτε στην είσοδο αναζήτησης πατώντας το κουμπί /.

Εναλλακτικά, μπορείτε επίσης να δεσμεύσετε τον συνδυασμό πλήκτρων Ctrl / Cmd + F, το οποίο είναι μια δημοφιλής συντόμευση πλήκτρων που χρησιμοποιείται για την αναζήτηση σε πολλές εφαρμογές για υπολογιστές:

 Mousetrap.bind (['εντολή + f', 'ctrl + f'], αναζήτηση); 

Χρησιμοποιώντας το Ποντικοπαγίδα με το Bootstrap

Είναι εύκολο να ενσωματώσετε το Ποντικοπαγίδα με ένα πλαίσιο, για παράδειγμα, Bootstrap. Σε αυτό το δεύτερο παράδειγμα, θα εμφανιστεί ένα παράθυρο βοήθειας που θα εμφανίσει μια λίστα συντομεύσεων που είναι διαθέσιμες στον ιστότοπο. Εδώ, επιλέγω το Bootstrap Modal για να παρουσιάσω τη λίστα και να ορίσω το; κλειδί για την εμφάνιση του τρόπου εκτέλεσης.

Παρόλο που το ? είναι προσβάσιμο μόνο με το πλήκτρο Shift, δεσμεύοντας μόνο το? κλειδί είναι επαρκής.

 Mousetrap.bind ('?', Λειτουργία () $ ('# help'). Modal ('εμφάνιση');); 

Τώρα όταν χτυπάς το; κλειδί, θα εμφανιστεί ένα αναδυόμενο παράθυρο.

Συμβουλή για αποτελεσματική σύνδεση

Με την πάροδο του χρόνου, η αυξανόμενη συλλογή συντομεύσεων πληκτρολογίου μπορεί να αρχίσει να ανακατεύει τον κώδικα σας. Αν συμβεί κάτι τέτοιο, υπάρχει μια επέκταση που μπορείτε να προσθέσετε για να φτιάξετε το δικό σας “σύνδεση κλειδιού” κώδικες πιο αποτελεσματικοί. Ονομάζεται το “bind dictionary”. Προσθέστε αυτήν την επέκταση μετά την κύρια βιβλιοθήκη Ποντικοπαγίδα, mousetrap.min.js.

Τώρα, αντί να διαχωρίζουμε κάθε δεσμευτικό κλειδί, μπορούμε να τα ομαδοποιήσουμε με ένα κομμάτι .δένω() μέθοδο, όπως έτσι:

 Mousetrap.bind ('/': αναζήτηση, 't': tweet, '?': Λειτουργία modal () $ ('# help'). ) highLight ('j'), 'k': λειτουργία prev () highLight ('k')); 

Για πιο προηγμένη εφαρμογή, μπορείτε να δείτε το demo που έκανα. Στην επίδειξη, μπορείτε να πατήσετε το πλήκτρο J ή K για να επισημάνετε την ανάρτηση και πατήστε το πλήκτρο T για να τιτίσετε την τρέχουσα ανάρτηση που τονίσατε.

• Προβολή επίδειξης
• Κατεβάστε