كيفية الحصول على قيمة نص الإدخال وتعيينها في JavaScript

في معظم صفحات الويب ، يلزم الحصول على قيمة نص الإدخال من المستخدمين لإدخال البيانات الصحيحة وضمان أمان البيانات. على سبيل المثال ، تحتاج إلى الحصول على بعض البيانات المحددة أو تعيينها أو تخزينها لاستخدامها لمزيد من المعالجة. في مثل هذه الحالات ، يصبح الحصول على قيمة نص الإدخال وتعيينها في JavaScript مفيدًا جدًا لحماية خصوصية البيانات.

ستوضح هذه الكتابة طرق الحصول على قيم نص الإدخال وتعيينها في JavaScript.

كيفية الحصول على قيمة نص الإدخال وتعيينها في JavaScript؟

للحصول على قيمة نص الإدخال وتعيينها في JavaScript ، استخدم:

' getElementById () ' طريقة
' getElementByClassName () ' طريقة
' محدد الاستعلام () ' طريقة

اذهب من خلال كل من الطرق المذكورة واحدة تلو الأخرى!

الطريقة الأولى: الحصول على قيمة نص الإدخال وتعيينها في JavaScript باستخدام أسلوب document.getElementById ()

ال ' getElementById () 'طريقة الوصول إلى عنصر بالمعرف المحدد. يمكن تطبيق هذه الطريقة للوصول إلى معرفات حقول الإدخال والأزرار للحصول على قيمة النص وتعيينها.

بناء الجملة

وثيقة. getElementById ( عناصر )

هنا، ' عناصر 'يشير إلى المعرف المحدد لعنصر.

يوضح المثال أدناه المفهوم الذي تمت مناقشته.

مثال
أولاً ، قم بتضمين حقلي نوع الإدخال وأزرار منفصلة للحصول على قيم نص الإدخال وتعيينها باستخدام ' عند النقر الأحداث التي ستصل إلى الوظائف المحددة:

< نوع الإدخال = 'نص' هوية شخصية = 'الحصول على النص' اسم = 'الحصول على النص' عند النقر = 'this.value =' '' />
< زر عند النقر = 'الحصول على النص()' > الحصول على قيمة زر >
< زر عند النقر = 'getAndSetText ()' > تعيين القيمة زر >
< نوع الإدخال = 'نص' هوية شخصية = 'نص مجموعة' اسم = 'نص مجموعة' عند النقر = 'this.value =' '' />

بعد ذلك ، احصل على قيمة حقل الإدخال بمساعدة طريقة document.getElementById ():

وثيقة. getElementById ( 'الحصول على النص' ) . القيمة = 'الإدخال هنا' ؛

الآن ، أعلن عن وظيفة باسم ' getAndSetText () '. هنا ، قم بإحضار حقل الإدخال باستخدام ' الحصول على النص 'id وتمرير قيمة الإدخال إلى حقل الإدخال التالي الذي يحتوي على' نص مجموعة ' هوية شخصية:

وظيفة getAndSetText ( ) {
كنت نص مجموعة = وثيقة. getElementById ( 'الحصول على النص' ) . القيمة ؛
وثيقة. getElementById ( 'نص مجموعة' ) . القيمة = نص مجموعة ؛
}

وبالمثل ، حدد وظيفة باسم ' الحصول على النص() '. بعد ذلك ، احصل على حقل الإدخال بـ ' الحصول على النص 'ومرر القيمة المعينة إلى مربع التنبيه للحصول على قيمة نص الإدخال:

وظيفة الحصول على النص ( ) {
كنت الحصول على النص = وثيقة. getElementById ( 'الحصول على النص' ) . القيمة ؛
إنذار ( الحصول على النص ) ؛
}

انتاج |

الطريقة 2: الحصول على قيمة نص الإدخال وتعيينها في JavaScript باستخدام أسلوب document.getElementByClassName ()

ال ' getElementByClassName () 'طريقة الوصول إلى عنصر بمساعدة اسم الفئة المحدد. يمكن تطبيق هذه الطريقة ، بالمثل ، للوصول إلى فئة حقل الإدخال والأزرار لإدخال قيمة النص وتعيينها.

بناء الجملة

وثيقة. getElementsByClassName ( اسم الفئة )

في الصيغة أعلاه ، ' اسم الفئة 'يمثل اسم فئة العناصر.

مثال
على غرار المثال السابق ، سنصل أولاً إلى حقل الإدخال الأول باستخدام ' الحصول على النص 'اسم الفصل. ثم حدد وظيفة باسم ' getAndSetText () 'واحصل على حقل الإدخال المحدد بناءً على اسم فئته وقم بتعيين القيمة في حقل الإدخال التالي:

وثيقة. getElementByClassName ( 'الحصول على النص' ) . القيمة = 'الإدخال هنا' ؛
وظيفة getAndSetText ( )
{
كنت نص مجموعة = وثيقة. getElementByClassName ( 'الحصول على النص' ) . القيمة ؛
وثيقة. getElementById ( 'نص مجموعة' ) . القيمة = نص مجموعة ؛
}

وبالمثل ، حدد وظيفة تسمى ' الحصول على النص() '، أضف اسم فئة حقل الإدخال الأول ومرر القيمة المحددة إلى مربع التنبيه لعرض القيمة التي تم جلبها:

وظيفة الحصول على النص ( ) {
كنت الحصول على النص = وثيقة. getElementByClassName ( 'الحصول على النص' ) . القيمة ؛
إنذار ( الحصول على النص ) ؛
}

سيؤدي هذا التنفيذ إلى الناتج التالي:

الطريقة الثالثة: الحصول على قيمة نص الإدخال وتعيينها في جافا سكريبت باستخدام أسلوب 'document.querySelector ()'

ال ' document.querySelector () 'يجلب البريد الأول ذهب للأسفل يطابق المحدد المحدد ، ويمكن للأسلوب addEventListener () إضافة معالج حدث إلى العنصر المحدد. يمكن تطبيق هذه الطرق للحصول على معرف حقل الإدخال والأزرار وتطبيق معالج الأحداث عليها.

بناء الجملة

وثيقة. الاستعلام ( محددات CSS )

هنا، ' محددات CSS 'يشير إلى محدد CSS واحد أو أكثر.

ننظر إلى المثال التالي.

مثال
أولاً ، قم بتضمين أنواع الإدخال مع قيم العناصر النائبة والأزرار للحصول على قيم نص الإدخال وتعيينها:

< نوع الإدخال = 'نص' هوية شخصية = 'إدخال - الحصول' نائب = 'الحصول على قيمة' >
< معرف الزر = 'احصل على' > احصل على زر >
< نوع الإدخال = 'نص' هوية شخصية = 'مجموعة الإدخال' نائب = 'تعيين القيمة' >
< معرف الزر = 'تعيين' > تعيين زر >

بعد ذلك ، قم بإحضار حقول الإدخال والأزرار المضافة باستخدام الزر ' document.querySelector () ' طريقة:

اسمحوا زر الحصول على = وثيقة. الاستعلام ( '#احصل على' ) ؛
اسمحوا buttonSet = وثيقة. الاستعلام ( '#تعيين' ) ؛
دعنا نحصل على المدخلات = وثيقة. الاستعلام ( '# input-get' ) ؛
دعونا تعيين المدخلات = وثيقة. الاستعلام ( '# مجموعة الإدخال' ) ؛
اسمحوا النتيجة = وثيقة. الاستعلام ( '#نتيجة' ) ؛

بعد ذلك ، قم بتضمين معالج الأحداث المسمى ' انقر 'لكلا الزرين للحصول على القيم وتعيينها ، على التوالي:

زر الحصول على. addEventListener ( 'انقر' و ( ) => {
نتيجة. النص الداخلي = getInput. القيمة ؛
} ) ؛
مجموعة الأزرار. addEventListener ( 'انقر' و ( ) => {
getInput. القيمة = ضبط الإدخال. القيمة ؛
} ) ؛

انتاج |

لقد ناقشنا أبسط الطرق للحصول على قيمة نص الإدخال وتعيينها في JavaScript.

استنتاج

للحصول على قيمة نص الإدخال وتعيينها في JavaScript ، استخدم ' document.getElementById () ”أو

' document.getElementByClassName () ”للوصول إلى حقل الإدخال المحدد والأزرار بناءً على معرفاتهم أو اسم الفئة الخاصة بهم ثم تعيين قيمهم. وعلاوة على ذلك، فإن ' document.querySelector () يمكن أيضًا استخدام 'للحصول على قيم نص الإدخال وتعيينها في JavaScript. توضح هذه المدونة طرق الحصول على قيم نص الإدخال وتعيينها في JavaScript.

كيفية الحصول على قيمة نص الإدخال وتعيينها في JavaScript