בעת יצירת טופס או שאלון, יכולה להיות דרישה להקצות ערך קלט משתמש לשדה ספציפי. לדוגמה, הוספת ערכים סודיים, כלומר, סיסמה או ערך מקודד כדי להשתמש בהם. במקרים כאלה, הגדרת הערך של רכיב קלט נסתר באמצעות JavaScript מסייעת בשמירה על בטיחות הנתונים.
בלוג זה ידון בהליך להגדרת הערך של שדה קלט נסתר באמצעות JavaScript
כיצד להגדיר את הערך של שדה קלט מוסתר באמצעות JavaScript?
כדי להגדיר את הערך של שדה הקלט הנסתר באמצעות JavaScript, החל את הגישות המפורטות להלן:
שיטה 1: הגדר את הערך של האלמנט הנסתר באמצעות מאפיין innerHTML
ה ' innerHTML ' מאפיין מחזיר את תוכן ה-HTML של האלמנט. ניתן להשתמש במאפיין זה כדי להגדיר ולהוסיף את הערך המוגדר על ידי המשתמש לשדה הקלט המוסתר שהוקצה.
תחביר:
element.innerHTML = טקסט
בתחביר לעיל, ' אֵלֵמֶנט ' מתייחס לאלמנט שצריך לצרף עם ' טֶקסט ' ערך.
דוגמא
בוא נעבור על הדוגמה המפורטת להלן:
< קֶלֶט סוּג = 'מוּסתָר' תְעוּדַת זֶהוּת = 'אלמנט מוסתר' ערך = '' >< תַסרִיט >
תן myInput = הנחיה ( 'אנא הכנס את הטקסט שלך' , '' ) ;
אם ( myInput ! = ריק ) {
תן x = document.getElementById ( 'אלמנט מוסתר' ) .innerHTML = 'הערך של אלמנט מוסתר הוא:' + myInput;
עֵרָנִי ( איקס )
}
תַסרִיט >
בגוש הקוד שלמעלה:
- ראשית, צור את שדה הקלט עם התכונות המצוינות.
- ה ' סוּג ' תכונה עם הערך ' מוּסתָר ' מסמל שזהו שדה נסתר.
- לאחר מכן, ה' מיידי תיבת הדו-שיח לוקחת ערך מהמשתמש.
- כעת, החל סימון על הערך המוגדר על ידי המשתמש כך שהוא לא ' ריק ' משתמש ב ' אם 'מצב.
- לבסוף, גש לשדה הקלט הנסתר על ידי ' תְעוּדַת זֶהוּת ' משתמש ב ' getElementById() שיטת ' והגדר את הערך המוגדר על ידי המשתמש באמצעות ' innerHTML ' תכונה.
- לבסוף, הצג את הערך המצורף באמצעות התראה.
תְפוּקָה
כפי שצוין, ערך הקלט של המשתמש מצורף לשדה הקלט הנסתר.
שיטה 2: הגדר את הערך של האלמנט הנסתר באמצעות jQuery Approach
בגישה זו, jQuery של ' val() השיטה תשמש כדי להקצות את הערך של שדה טקסט הקלט הגלוי לשדה הקלט הנסתר.
דוגמא
בואו נסקור את הקוד הבא:
< ע > הזן את הערך ל אלמנט נסתר ע >< קֶלֶט תְעוּדַת זֶהוּת = 'myInput' ערך = '' סוּג = 'טֶקסט' />< br >
< קֶלֶט תְעוּדַת זֶהוּת = 'אלמנט מוסתר' סוּג = 'מוּסתָר' ערך = '' />
< br >
< לַחְצָן תְעוּדַת זֶהוּת = 'btnShow' > שלח לַחְצָן >
< תַסרִיט src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > תַסרִיט >
< תַסרִיט >
$ ( '#btnShow' ) .עַל ( 'נְקִישָׁה' , פוּנקצִיָה ( ) {
תן inputValue = $ ( '#myInput' ) .val ( ) ;
$ ( '#hiddenElement' ) .val ( ערך קלט ) ;
עֵרָנִי ( 'הערך של אלמנט מוסתר הוא:' + ערך קלט ) ;
} ) ;
תַסרִיט >
בשורות הקוד לעיל:
- ראשית, כלול שדה טקסט קלט בעל התכונות המצוינות.
- כמו כן, הקצו שדה קלט נסתר נוסף, כפי שעולה מה' סוּג ' תכונה.
- נוסף תג
- לאחר מכן, כלול את ספריית jQuery בעזרת ה-' src תכונה ב'