כתיבה זו תסביר את הגישות לקבלת ערך אזור טקסט ב-JavaScript.
כיצד לקבל ערך אזור טקסט ב-JavaScript?
ניתן לאחזר את ערך אזור הטקסט ב-JavaScript באמצעות הגישות הבאות:
- ' getElementById() ' שיטה.
- ' addEventListener() ' שיטה.
- ' jQuery '.
גישה 1: קבל ערך אזור טקסט ב-JavaScript באמצעות שיטת getElementById()
ה ' getElementById() שיטת ' ניגשת לרכיב עם ה-' שצוין תְעוּדַת זֶהוּת '.שיטה זו יכולה להיות מיושמת כדי להביא את שדה טקסט הקלט ולהחזיר את הערך שהוזן בו.
תחביר
מסמך. getElementById ( אֵלֵמֶנט )
בתחביר הנתון:
- ' אֵלֵמֶנט ' מתייחס ל ' תְעוּדַת זֶהוּת ' להילקח כנגד האלמנט המסוים.
דוגמא
בואו נסתכל על הדוגמה הבאה:
בואו ליישם את השלבים הבאים בקוד שלהלן:
< h3 > קבל ערך אזור טקסט ב JavaScript h3 >
הקלד משהו : < סוג קלט = 'טֶקסט' תְעוּדַת זֶהוּת = 'טקסט' מציין מיקום = 'הזן טקסט...' >
< כפתור בלחיצה = 'textareaValue()' > קבל ערך לַחְצָן >
בצע את השלבים הבאים:
- בשלב הראשון, ציין את הכותרת המצוינת.
- לאחר מכן, כלול את שדה טקסט הקלט עם ' תְעוּדַת זֶהוּת ' ו' מציין מיקום ' ערך.
- כמו כן, צור כפתור עם ' בלחיצה אירוע מפנה מחדש לפונקציה textareaValue()
בואו נתקדם לחלק ה-JavaScript של הקוד:
< תַסרִיט >פוּנקצִיָה textareaValue ( ) {
תן לקבל = מסמך. getElementById ( 'טקסט' ) . ערך
עֵרָנִי ( לקבל )
}
תַסרִיט >
בקוד JavaScript לעיל:
- הכריז על פונקציה בשם ' textareaValue() '.
- בהגדרתו, גש לשדה טקסט הקלט על ידי המזהה שצוין באמצעות ' getElementById() ' שיטה.
- כמו כן, החל את ' ערך ' מאפיין על מנת לאחזר את ערך הטקסט שהוזן.
- לבסוף, הצג את ערך אזור הטקסט באמצעות ' עֵרָנִי ' תיבת דו-שיח.
תְפוּקָה
בפלט לעיל, ניתן לראות שהערך שהוזן נלקח באמצעות תיבת דו-שיח התראה.
גישה 2: קבל ערך אזור טקסט ב-JavaScript באמצעות שיטת addEventListener()
ה ' addEventListener() שיטת ' משמשת לשיוך ' מִקרֶה 'עם אלמנט. ניתן להשתמש בשיטה זו כדי לצרף אירוע לפונקציה כך שערך אזור הטקסט יובא בכל קלט זה לצד זה במסוף.
תחביר
אֵלֵמֶנט. addEventListener ( מִקרֶה , פוּנקצִיָה , exec )בתחביר לעיל:
- ' מִקרֶה ' מצביע על שם האירוע.
- ' פוּנקצִיָה ' מציין את הפונקציה שתרוץ על הפעלת אירוע.
- ' exec ' הוא הפרמטר האופציונלי.
דוגמא
בואו נעקוב אחר הדוגמה הנתונה להלן צעד אחר צעד:
< מזהה אזור טקסט = 'txtarea' שורות = '5' קולס = '25' מציין מיקום = 'הזן טקסט...' > אזור טקסט >
< סוג סקריפט = 'טקסט/Javascript' >
תן לקבל = מסמך. getElementById ( 'txtarea' ) ;
לְנַחֵם. עֵץ ( לקבל . ערך ) ;
לקבל . addEventListener ( 'קֶלֶט' , פוּנקצִיָה textareaValue ( מִקרֶה ) {
לְנַחֵם. עֵץ ( מִקרֶה. יַעַד . ערך ) ;
} ) ;
תַסרִיט >
בקטע הקוד שלמעלה:
- ציין את התווית המצוינת. כמו כן, הקצו את ' אזור טקסט ' רכיב עם הערך שצוין ' תְעוּדַת זֶהוּת ' ו' מציין מיקום ' ולהתאים גם את מידותיו.
- בחלק ה-JavaScript של הקוד, גש לאזור הטקסט שצוין בשלב הקודם והצג אותו באמצעות ' ערך ' תכונה.
- בשלב הבא, צרף אירוע ' טֶקסט ' למביא ' אזור טקסט ' משתמש ב ' addEventListener() ' השיטה והחל אותה על הפונקציה ' textareaValue() '. ה ' מִקרֶה ' בטיעון שלו מעביר מידע על האירוע שהופעל.
- זה יביא לרישום כל אחד מערכי הטקסט שהוזנו זה לצד זה.
תְפוּקָה
מהפלט לעיל, ה- ' מַקסִים ' של כל אחד מערכי הטקסט שהוזנו ניתן לראות.
גישה 3: קבל ערך אזור טקסט ב-JavaScript באמצעות jQuery
' jQuery 'ניתן להחיל כדי לגשת לשדה טקסט הקלט ולהפעיל את הפונקציות שלו ברגע ש-Document Object Model(DOM) נטען.
דוגמא
בואו נלך על הדוגמה הנתונה להלן:
הקלד משהו : < סוג קלט = 'טֶקסט' תְעוּדַת זֶהוּת = 'טקסט' מציין מיקום = 'הזן טקסט...' >
< לַחְצָן > קבל ערך לַחְצָן >
בשורות הקוד לעיל, בצע את השלבים הבאים:
- כלול את ספריית jQuery כדי ליישם את השיטות שלה.
- ציין את ' קֶלֶט ' כשדה טקסט עם הערכים שצוינו של ' תְעוּדַת זֶהוּת ' ו' מציין מיקום ' כפי שנדון קודם.
- כמו כן, צור כפתור על מנת לקבל את הערך בלחיצה על הכפתור.
עברו לחלק ה-JavaScript של הקוד:
< תַסרִיט >$ ( מסמך ) . מוּכָן ( פוּנקצִיָה ( ) {
$ ( 'לַחְצָן' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
לְנַחֵם. עֵץ ( $ ( 'הקלד טקסט' ) . val ( ) ) ;
} ) ;
} ) ;
תַסרִיט >
בצע את השלבים המפורטים:
- החל את ' מוּכָן() שיטת ' על מנת להחיל את השיטות הנוספות על ה-DOM הנטען.
- גש ללחצן שנוצר וצרף את ' נְקִישָׁה() ” שיטה אליו שתבצע את הפונקציה האמורה בפרמטר שלה.
- שיטת click() תיגש לשדה טקסט הקלט שצוין ותרשם את ערך הטקסט שהוזן במסוף.
תְפוּקָה
לפיכך, ערך הסוג נרשם בקונסולה.
כל אלה היו הדרכים השונות לקבל את הערך של אזור הטקסט בעזרת JavaScript.
סיכום
ה ' getElementById() שיטת ', ה' addEventListener() שיטת ' או ה' jQuery ניתן להשתמש כדי לקבל ערך אזור טקסט ב-JavaScript. ניתן ליישם את שיטת getElementById() כדי לגשת לשדה טקסט הקלט ולהציג את ערך אזור הטקסט שהוזן באמצעות התראה. ניתן להשתמש בשיטת addEventListener() כדי לצרף ' קֶלֶט ' אירוע אשר יקבל את ערך הטקסט על כל קלט זה לצד זה. ניתן להחיל את ה-jQuery כדי לגשת ישירות לכפתור ולאחזר את ערך הטקסט שהוזן בלחיצה על הכפתור על המסוף. מדריך זה מסביר כיצד להשיג ערך אזור טקסט ב-JavaScript.