Σε σενάρια όπως η επικύρωση και η επαλήθευση δεδομένων, το στυλ των στοιχείων πεδίου αλλάζει κάθε φορά που ο χρήστης απελευθερώνει το μεμονωμένο πλήκτρο που πατιέται από το πληκτρολόγιο. Αυτή η αλλαγή του στυλ σε σχέση με κάθε πάτημα πλήκτρου ή απελευθέρωση πραγματοποιείται μέσω χειριστών συμβάντων που παρέχονται από το jQuery. Για να είμαστε συγκεκριμένοι, ο χειριστής συμβάντων ή η μέθοδος που αντιμετωπίζει ή καλεί τη συνάρτηση όταν απελευθερώνεται οποιοδήποτε πατημένο πλήκτρο είναι το ' keyup ()».
Από την άλλη πλευρά, η μέθοδος που χειρίζεται ή επικαλείται το πλήκτρο λειτουργίας που πατιέται είναι η ' keydown ()' και μπορείτε να ελέγξετε τη συσχετισμένη μας άρθρο για αυτή την εκδήλωση.
Σε αυτό το ιστολόγιο, θα παρέχουμε μια σύντομη περιγραφή της μεθόδου jQuery keyup().
Πώς να χρησιμοποιήσετε τη μέθοδο jQuery keyup();
Το jQuery ' keyup Η μέθοδος ()” ενεργοποιεί την ανώνυμη λειτουργία κάθε φορά που ο χρήστης σταματά να πατάει ή να εισάγει τα πλήκτρα μέσα στο επιλεγμένο πεδίο. Αυτή η μέθοδος χρησιμοποιείται επίσης για την εφαρμογή δυναμικού στυλ στο επιλεγμένο στοιχείο σε πραγματικό χρόνο.
Σύνταξη
Η σύνταξη που χρησιμοποιείται για τη μέθοδο keyup() jQuery είναι η εξής:
$ ( 'Αυτό' ) . keyup ( customFunc )
Στην παραπάνω σύνταξη, ' Αυτό ' είναι το επιλεγμένο στοιχείο HTML και ' customFunc ' είναι μια συνάρτηση που εκτελείται από το ' keyup 'μέθοδος πάνω από το ' Αυτό '.
Ας έχουμε μερικά παραδείγματα για μια βαθύτερη κατανόηση.
Παράδειγμα 1: Αλλαγή του χρώματος κειμένου χρησιμοποιώντας τη μέθοδο 'keyup()'.
Σε αυτήν την περίπτωση, το χρώμα του εισαγόμενου κειμένου πρόκειται να αλλάξει σε διαφορετικό χρώμα όταν ο χρήστης αφήσει το ήδη πατημένο πλήκτρο όπως φαίνεται παρακάτω:
< html >
< κεφάλι >
< γραφή src = 'https://code.jquery.com/jquery-3.7.0.js' >< / γραφή >
< γραφή >
$(document).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('color', 'forestgreen');
});
});
< / γραφή >
< / κεφάλι >
< σώμα >
< div >
Εισαγάγετε δεδομένα Linuxhint: < εισαγωγή ταυτότητα = 'διαδήλωση' τύπος = 'κείμενο' / >
< / div >
< / σώμα >
< / html >
Η περιγραφή του παραπάνω κώδικα αναφέρεται παρακάτω:
- Αρχικά, εισαγάγετε το jQuery στο έργο εισάγοντας το διαδικτυακό του CDN επισκεπτόμενοι αυτό Σύνδεσμος επίσημων εγγράφων.
- Στη συνέχεια, δημιουργήστε μια ανώνυμη συνάρτηση που θα καλείται όταν το ' έγγραφο ' ή η σελίδα φορτώνεται. Αυτή η συνάρτηση επιλέγει το στοιχείο HTML με ένα αναγνωριστικό 'demo' και επισυνάπτει το ' keyup ()» μέθοδο με αυτό.
- Ο ' keyup ()' η μέθοδος καλεί τη συνάρτηση επανάκλησης που χρησιμοποιεί το ' css ()' για να ορίσετε το χρώμα της γραμματοσειράς του κειμένου σε ' πράσινο του δάσους '.
- Τώρα, δημιουργήστε το επιλεγμένο «< εισαγωγή >» στο στοιχείο «< σώμα >' προσθέστε ετικέτα και αντιστοιχίστε του ένα αναγνωριστικό του ' διαδήλωση '.
Προεπισκόπηση της ιστοσελίδας μετά την ολοκλήρωση της διαδικασίας μεταγλώττισης:
Η έξοδος δείχνει ότι το χρώμα του κειμένου αλλάζει όταν απελευθερωθεί το επιλεγμένο πλήκτρο.
Παράδειγμα 2: Δυναμική αλλαγή του χρώματος φόντου
Σε αυτό το παράδειγμα, θα οριστούν διαφορετικά χρώματα φόντου για το επιλεγμένο στοιχείο HTML κάθε φορά που ο χρήστης αφήνει το πατημένο πλήκτρο. Ας ρίξουμε μια ματιά στον κώδικα για αυτό το σενάριο:
< κεφάλι >< γραφή src = 'https://code.jquery.com/jquery-3.7.0.js' >< / γραφή >
< γραφή >
αφήστε τις αποχρώσεις φόντου = [ 'ακουαμαρίνης' , 'πορτοκαλοκόκκινο' , 'cadetblue' , 'πράσινο του δάσους' ,
'ανοιχτό γκρι' , 'αμμοκαφέ' , 'πορφύρα βαφή' , 'burlywood' ] ;
ας j = 0 ;
$ ( έγγραφο ) .keyup ( λειτουργία ( Εκδήλωση ) {
$ ( '#hgg' ) .css ( 'χρώμα του φόντου' , αποχρώσεις φόντου [ ι ] ) ;
j++;
ι = j % 9 ;
} ) ;
< / γραφή >
< / κεφάλι >
< σώμα >
< h1 στυλ = 'χρώμα: θαλασσινό' >Άρθρο Linux< / h1 >< br >
< div ταυτότητα = 'hgg' στυλ = 'επένδυση: 10 εικονοστοιχεία' >
< h2 >Πληκτρολόγιο jQuery Χρησιμοποιείται για ρύθμιση διαφορετικών Ιστορικό κάθε φορά που απελευθερώνεται το κλειδί.< / h2 >
< br / >
< / div >
< / σώμα >
Περιγραφή του παραπάνω κώδικα:
- Αρχικά, εισαγάγετε το jQuery στο έργο σας προσθέτοντας jQuery CDN μέσα στο '< κεφάλι >» ετικέτα.
- Στη συνέχεια, δημιουργήστε έναν πίνακα με το όνομα ' Αποχρώσεις φόντου ” που περιέχει οκτώ τυχαία χρώματα.
- Στη συνέχεια, το « keyup ()' η μέθοδος επισυνάπτεται στο ' έγγραφο ” και καλεί μια ανώνυμη λειτουργία επανάκλησης. Αυτή η συνάρτηση επιλέγει το στοιχείο HTML με ένα αναγνωριστικό ' hgg ' και εφαρμόζει το CSS ' χρώμα του φόντου ” ιδιοκτησία.
- Η συστοιχία ' Αποχρώσεις φόντου Το ' μεταβιβάζεται ως τιμή για τις ιδιότητες CSS και το ευρετήριο ορίζεται σε ' ι ” μεταβλητή. Αυτή η μεταβλητή αυξάνεται κατά ένα κάθε φορά και επανεκκινείται από το ' 0 ' ευρετήριο όταν η τιμή φτάσει ' 8 '. Επειδή ο μέγιστος δείκτης στον πίνακα είναι ' 7 '.
- Μετά από αυτό, δημιουργήστε ένα επιλεγμένο ' div ' στοιχείο με αναγνωριστικό ' hgg ”, το χρώμα φόντου αυτού του στοιχείου πρόκειται να αλλάξει όταν απελευθερωθεί το πατημένο πλήκτρο.
Προεπισκόπηση της ιστοσελίδας μετά τη συλλογή:
Η έξοδος επιβεβαιώνει ότι το χρώμα φόντου για το επιλεγμένο στοιχείο HTML αλλάζει κάθε φορά που απελευθερώνεται το πατημένο ή επιλεγμένο πλήκτρο. Αυτό έχει να κάνει με τη χρήση του ' keyup ()».
συμπέρασμα
Το jQuery ' keyup Η μέθοδος ()” ενεργοποιεί μια λειτουργία επανάκλησης στο επιλεγμένο στοιχείο HTML όταν το πατημένο πλήκτρο έχει απελευθερωθεί. Αυτή η μέθοδος δεν καλεί όταν πατάτε το πλήκτρο, αλλά τη στιγμή της απελευθέρωσης ή του πληκτρολογίου αυτή η λειτουργία εκτελεί μια λειτουργία επανάκλησης. Αυτό το ιστολόγιο έχει εξηγήσει τη χρήση και τη λειτουργία της μεθόδου jQuery keyup().