כיצד לקבל ולהגדיר ערך טקסט קלט ב-JavaScript

ברוב דפי האינטרנט, נדרש לקבל מהמשתמשים את ערך טקסט הקלט כדי להזין נתונים נכונים ולהבטיח אבטחת מידע. לדוגמה, עליך לקבל, להגדיר או לאחסן נתונים ספציפיים כדי להשתמש בהם לעיבוד נוסף. במקרים כאלה, קבלת והגדרה של ערך טקסט קלט ב-JavaScript עוזרת מאוד להגנה על פרטיות הנתונים.

כתיבה זו תדגים את השיטות לקבל ולהגדיר ערכי טקסט קלט ב-JavaScript.

כיצד לקבל ולהגדיר ערך טקסט קלט ב-JavaScript?

כדי לקבל ולהגדיר ערך טקסט קלט ב-JavaScript, השתמש ב:

' getElementById() ' שיטה
' getElementByClassName() ' שיטה
' querySelector() ' שיטה

עברו על כל אחת מהשיטות המוזכרות אחת לאחת!

שיטה 1: קבל והגדר ערך טקסט קלט ב-JavaScript באמצעות שיטת document.getElementById()

ה ' getElementById() ' השיטה ניגשת לרכיב עם ה-ID שצוין. ניתן ליישם שיטה זו כדי לגשת למזהים של שדות הקלט והלחצנים לקבלת והגדרת ערך הטקסט.

תחביר

מסמך. getElementById ( אלמנטים )

כאן, ' אלמנטים ' מתייחס ל-ID שצוין של אלמנט.

הדוגמה שלהלן מסבירה את הרעיון הנדון.

דוגמא
ראשית, כלול שני שדות של סוג קלט וכפתורים נפרדים לקבלת והגדרת ערכי טקסט הקלט עם ' בלחיצה ' אירועים שייגשו לפונקציות שצוינו:

< סוג קלט = 'טֶקסט' תְעוּדַת זֶהוּת = 'getText' שֵׁם = 'getText' בלחיצה = 'this.value = '' ' />
< כפתור בלחיצה = 'getText()' > קבל ערך לַחְצָן >
< כפתור בלחיצה = 'getAndSetText()' > הגדר ערך לַחְצָן >
< סוג קלט = 'טֶקסט' תְעוּדַת זֶהוּת = 'setText' שֵׁם = 'setText' בלחיצה = 'this.value = '' ' />

לאחר מכן, קבל את הערך של שדה הקלט בעזרת השיטה document.getElementById():

מסמך. getElementById ( 'getText' ) . ערך = 'קלט כאן' ;

כעת, הכריז על פונקציה בשם ' getAndSetText() '. כאן, אחזר את שדה הקלט עם ' getText ' id והעבירו את ערך הקלט לשדה הקלט הבא עם ' setText ' id:

פוּנקצִיָה getAndSetText ( ) {
היה setText = מסמך. getElementById ( 'getText' ) . ערך ;
מסמך. getElementById ( 'setText' ) . ערך = setText ;
}

באופן דומה, הגדר פונקציה בשם ' getText() '. לאחר מכן, קבל את שדה הקלט עם ' getText ' id והעבירו את הערך המסוים לתיבת ההתראה לקבלת ערך טקסט הקלט:

פוּנקצִיָה getText ( ) {
היה getText = מסמך. getElementById ( 'getText' ) . ערך ;
עֵרָנִי ( getText ) ;
}

תְפוּקָה

שיטה 2: קבל והגדר ערך טקסט קלט ב-JavaScript באמצעות שיטת document.getElementByClassName()

ה ' getElementByClassName() שיטת ” ניגשת לאלמנט בעזרת שם המחלקה שצוין. ניתן ליישם שיטה זו, באופן דומה, כדי לגשת למחלקה של שדה הקלט וללחצנים להזנה והגדרת ערך הטקסט.

תחביר

מסמך. getElementsByClassName ( שם הכיתה )

בתחביר לעיל, ה-' שם הכיתה ” מייצג את שם המחלקה של אלמנטים.

דוגמא
בדומה לדוגמה הקודמת, נגיע תחילה לשדה הקלט הראשון עם ה-' getText 'שם הכיתה. לאחר מכן, הגדר פונקציה בשם ' getAndSetText() ' וקבל את שדה הקלט שצוין בהתבסס על שם המחלקה שלו והגדר את הערך בשדה הקלט הבא:

מסמך. getElementByClassName ( 'getText' ) . ערך = 'קלט כאן' ;
פוּנקצִיָה getAndSetText ( )
{
היה setText = מסמך. getElementByClassName ( 'getText' ) . ערך ;
מסמך. getElementById ( 'setText' ) . ערך = setText ;
}

באופן דומה, הגדר פונקציה בשם ' getText() ', הוסף את שם המחלקה של שדה הקלט הראשון והעביר את הערך המסוים לתיבת ההתראה כדי להציג את הערך שאוחזר:

פוּנקצִיָה getText ( ) {
היה getText = מסמך. getElementByClassName ( 'getText' ) . ערך ;
עֵרָנִי ( getText ) ;
}

יישום זה יניב את הפלט הבא:

שיטה 3: קבל והגדר ערך טקסט קלט ב-Javascript באמצעות שיטת 'document.querySelector()'

ה ' document.querySelector() ” מביא את ה-e הראשון נפל שתואם את הבורר שצוין, והשיטה addEventListener() יכולה להוסיף מטפל באירועים לרכיב הנבחר. ניתן ליישם שיטות אלו כדי לקבל את המזהה של שדה הקלט והלחצנים ולהחיל עליהם מטפל באירועים.

תחביר

מסמך. querySelector ( בוררי CSS )

כאן, ' בוררי CSS ' מתייחס לבורר CSS אחד או יותר.

תסתכל על הדוגמה הבאה.

דוגמא
ראשית, כלול סוגי קלט עם ערכי מציין המיקום שלהם וכפתורים לקבלת והגדרת ערכי טקסט הקלט:

< סוג קלט = 'טֶקסט' תְעוּדַת זֶהוּת = 'קלט-קבל' מציין מיקום = 'קבל ערך' >
< מזהה כפתור = 'לקבל' > לקבל לַחְצָן >
< סוג קלט = 'טֶקסט' תְעוּדַת זֶהוּת = 'ערכת קלט' מציין מיקום = 'הגדר ערך' >
< מזהה כפתור = 'מַעֲרֶכֶת' > מַעֲרֶכֶת לַחְצָן >

לאחר מכן, אחזר את שדות הקלט והלחצנים שנוספו באמצעות ' document.querySelector() ' שיטה:

תן לחצן Get = מסמך. querySelector ( '#לקבל' ) ;
תן לחצן להגדיר = מסמך. querySelector ( '#מַעֲרֶכֶת' ) ;
תן getInput = מסמך. querySelector ( '#input-get' ) ;
תן setInput = מסמך. querySelector ( '#input-set' ) ;
לתת לתוצאה = מסמך. querySelector ( '#תוֹצָאָה' ) ;

לאחר מכן, כלול מטפל באירועים בשם ' נְקִישָׁה ' עבור שני הכפתורים כדי לקבל ולהגדיר את הערכים, בהתאמה:

כפתור Get. addEventListener ( 'נְקִישָׁה' , ( ) => {
תוֹצָאָה. innerText = getInput. ערך ;
} ) ;
לחצן סט. addEventListener ( 'נְקִישָׁה' , ( ) => {
getInput. ערך = setInput. ערך ;
} ) ;

תְפוּקָה

דנו בשיטות הפשוטות ביותר לקבלת והגדרת ערך טקסט קלט ב-JavaScript.

סיכום

כדי לקבל ולהגדיר ערך טקסט קלט ב-JavaScript, השתמש ב-' document.getElementById() 'שיטה או את

' document.getElementByClassName() ' שיטה לגישה לשדה הקלט ולכפתורים שצוינו בהתבסס על המזהים או שם המחלקה שלהם ולאחר מכן להגדיר את הערכים שלהם. יתר על כן, ה' document.querySelector() 'ניתן להשתמש גם לצורך קבלת והגדרת ערכי טקסט קלט ב-JavaScript. בלוג זה הסביר את השיטות לקבל ולהגדיר ערכי טקסט קלט ב-JavaScript.

כיצד לקבל ולהגדיר ערך טקסט קלט ב-JavaScript