בתרחישים כמו אימות נתונים ואימות, הסגנון של רכיבי השדה משתנה בכל פעם שהמשתמש משחרר את המקש הנלחץ על ידי המשתמש מהמקלדת. שינוי סגנון זה ביחס לכל לחיצה או שחרור מקש מתבצע באמצעות מטפלי אירועים המסופקים על ידי jQuery. ליתר דיוק, מטפל האירועים או השיטה שמטפלת או מפעילה את הפונקציה כאשר כל מקש שנלחץ משתחרר הוא ' מפתח למעלה ()' שיטה.
מצד שני, השיטה שמטפלת או מפעילה את מקש הפונקציה נלחץ היא ' מקלדת ()' שיטת ותוכל לבדוק את המשויך שלנו מאמר לאירוע זה.
בבלוג זה, נספק תיאור קצר של שיטת ה-jQuery keyup().
כיצד להשתמש בשיטת jQuery keyup()?
ה-jQuery' מפתח למעלה שיטת ()' מפעילה את הפונקציה האנונימית בכל פעם שהמשתמש מפסיק ללחוץ או להזין את המקשים בתוך השדה שנבחר. שיטה זו משמשת גם להחלת סגנון דינמי על האלמנט הנבחר בזמן אמת.
תחביר
התחביר המשמש עבור שיטת keyup() jQuery הוא כדלקמן:
$ ( 'זֶה' ) . מפתח למעלה ( customFunc )
בתחביר לעיל, ' זֶה ' הוא רכיב ה-HTML שנבחר, ו-' customFunc ' היא פונקציה שמתבצעת על ידי ' מפתח למעלה שיטה על פני ' זֶה '.
בואו נביא כמה דוגמאות להבנה מעמיקה יותר.
דוגמה 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 עם המזהה 'הדגמה' ומצרפת את ה-' מפתח למעלה ()' שיטת איתו.
- ה ' מפתח למעלה שיטת ()' מפעילה את פונקציית ה-callback המשתמשת ב-' css ()' כדי להגדיר את צבע הגופן של הטקסט ל' ירוק יער '.
- כעת, צור את '< קֶלֶט >' בתוך ה-'< גוּף >' תג והקצה לו מזהה של ' הַדגָמָה '.
תצוגה מקדימה של דף האינטרנט לאחר השלמת תהליך ההידור:
הפלט מראה את צבע הטקסט המשתנה לאחר שחרור המקש שנבחר.
דוגמה 2: שינוי צבע הרקע באופן דינמי
בדוגמה זו, צבעי רקע שונים יוגדרו עבור רכיב ה-HTML הנבחר בכל פעם שהמשתמש עוזב את המקש לחוץ. בואו נסתכל על הקוד עבור התרחיש הזה:
< רֹאשׁ >< תַסרִיט src = 'https://code.jquery.com/jquery-3.7.0.js' >< / תַסרִיט >
< תַסרִיט >
תן רקע גוונים = [ 'תַרשִׁישׁ' , 'כתום אדום' , 'קדטבלו' , 'ירוק יער' ,
'אפור בהיר' , 'חום חולי' , 'מַגֶנטָה' , 'בורליווד' ] ;
תן י = 0 ;
$ ( מסמך ) .מפתח למעלה ( פוּנקצִיָה ( מִקרֶה ) {
$ ( '#hgg' ) .css ( 'צבע רקע' , רקע גוונים [ י ] ) ;
j++;
י = j % 9 ;
} ) ;
< / תַסרִיט >
< / רֹאשׁ >
< גוּף >
< h1 סִגְנוֹן = 'צבע: ירוק ים' >מאמר Linuxhint< / h1 >< br >
< div תְעוּדַת זֶהוּת = 'הג' סִגְנוֹן = 'ריפוד: 10px' >
< h2 >מפתח jQuery משמש להגדרה שונה רקע כללי בכל פעם כאשר מפתח משוחרר.< / h2 >
< br / >
< / div >
< / גוּף >
תיאור הקוד לעיל:
- תחילה, ייבא את ה-jQuery לפרויקט שלך על-ידי הוספת jQuery CDN בתוך ה-'< רֹאשׁ >' תג.
- לאחר מכן, צור מערך בשם ' רקע גוונים ' המכיל שמונה צבעים אקראיים.
- לאחר מכן, ה' מפתח למעלה שיטת ()' מצורפת ל' מסמך ' והוא מפעיל פונקציית התקשרות אנונימית. פונקציה זו בוחרת את רכיב ה-HTML עם המזהה של ' hgg ' ומחיל את ה-CSS ' צבע רקע ' תכונה.
- המערך' רקע גוונים ' מועבר כערך עבור מאפייני ה-CSS והאינדקס מוגדר ל' י 'משתנה. משתנה זה מוגדל באחד בכל פעם ומתחיל מחדש מה-' 0 ' אינדקס כאשר הערך מגיע ל' 8 '. מכיוון שהאינדקס המקסימלי במערך הוא ' 7 '.
- לאחר מכן, צור ' div ' רכיב עם מזהה של ' hgg ', צבע הרקע של אלמנט זה ישתנה כאשר המקש לחוץ ישתחרר.
תצוגה מקדימה של דף האינטרנט לאחר הקומפילציה:
הפלט מאשר שצבע הרקע של רכיב ה-HTML שנבחר משתנה בכל פעם כשהמקש הנלחץ או שנבחר משתחרר. זה הכל על השימוש ב' מפתח למעלה ()' שיטה.
סיכום
ה-jQuery' מפתח למעלה שיטת ()' מפעילה פונקציית התקשרות חוזרת ברכיב ה-HTML שנבחר כאשר המקש לחוץ שוחרר. שיטה זו אינה מתקשרת בעת לחיצה על המקש אך בזמן השחרור או על מקש למעלה פונקציה זו מבצעת פונקציית התקשרות חוזרת. בלוג זה הסביר את השימוש והפעולה של שיטת jQuery keyup() .