מאמר זה דן כיצד לטפל באירועי השינוי הניתנים לעריכה ב-JavaScript ומסביר זאת בעזרת דוגמה.
כיצד לטפל באירועי שינויים הניתנים לעריכה ב-JavaScript?
ה-contenteditable הוא תכונה רשומה. המשתמש יכול לבצע שינויים בתוכן בהתחשב בדרישותיו. אם זה מותר, הדפדפן משנה את הווידג'ט שלו כדי לאפשר שינוי האלמנטים.
אילו ערכים מותרים על ידי אירוע שינוי הניתן לעריכה?
ה-contenteditable יכול לקחת אחד מהערכים הבאים:
- טקסט פשוט בלבד מייצג שניתן לערוך את הטקסט המקורי למרות שעיצוב הטקסט העשיר מושבת.
- מחרוזת ריקה או true מה שאומר שניתן לערוך את האלמנט.
- false מרמז שלא ניתן לערוך את האלמנט.
דוגמא
הדוגמה הבאה מסבירה כיצד ניתן להשתמש בתוכן הניתן לעריכה בדף אינטרנט. הבה נסתכל על הקוד שלהלן כדי להבין אותו טוב יותר:
HTML
להלן קוד HTML המסביר את השימוש באירועי השינוי הניתנים לעריכה בתוכן:
< ציטוט בלוק ניתן לעריכה = 'נָכוֹן' >
< h3 > ערוך את התוכן שלך כאן! < / h3 >
< / ציטוט בלוק >
בקוד HTML לעיל:
- תג blockquote נוצר כשהתכונה contenteditable מוגדרת ל-true. זה יאפשר לערוך את התוכן שבתג blockquote.
- תג h3 קיים בתוך תג blockquote. זה אומר 'ערוך את התוכן שלך כאן!', כפי שהוא קיים בתוך
, מה שאומר שהמשתמש יכול לערוך את התוכן.
CSS
כדי להפוך את הקוד שלנו למושך מבחינה ויזואלית, השתמשנו בקוד ה-CSS הבא:
ציטוט בלוק {
רקע כללי : אפרסק פאף ;
רדיוס הגבול : 10 פיקסלים ;
שולים : 10 פיקסלים ;
}
blockquote h3 {
ריפוד : 10 פיקסלים ;
}
בקוד CSS לעיל:
- רקע תג blockquote מוגדר לצבע אפרסק עם רדיוס גבול של 10px ושוליים של 10px.
- הכותרת h3 בתוך blockquote מוגדרת לריפוי של 10px.
תְפוּקָה :
הפלט הבא מסביר כיצד ניתן לערוך את התוכן באמצעות אירוע ה-contenteditable change ב-JavaScript:
חשיבות עריכת התוכן
- אינטראקטיביות מוגברת מכיוון שהמשתמש יכול לשנות את התוכן בנוחות.
- התאמה אישית נוחה כמתכנת בעזרת JavaScript יכולה ליצור התנהגויות משתנות כמו שמירה אוטומטית, להפעיל פעולות שונות על סמך קלט המשתמש.
- עוזר לייעל את תהליך העריכה המאפשר למשתמש לערוך בצורה דינמית ללא צורך בשדה טקסט נפרד.
סיכום
אירועי השינוי הניתנים לעריכה ב-JavaScript מאפשרים למשתמש לשנות את התוכן מה שהופך את דף האינטרנט למגיב וניתן להתאמה אישית. זה סולל את הדרך לפיתוח אינטרנט ממוקד משתמש שבו משתמש יכול לערוך את התוכן בדף אינטרנט בזמן אמת, מה שמאפשר חווית משתמש רספונסיבית יותר. מאמר זה דן כיצד לטפל באירועי שינוי הניתנים לעריכה ב-JavaScript והסביר זאת בעזרת דוגמה.