كيفية إنشاء مربع نص ديناميكيًا في JavaScript

يسميها البعض السحر - القدرة على جعل الأشياء تظهر فجأة من العدم. يمكنك إنشاء هذا النوع من السحر على موقع الويب الخاص بك باستخدام بضعة أسطر من JavaScript. مربعات النص ، على سبيل المثال ، هي عناصر HTML جيدة لاستخدامها عند تعلم كيفية جعل الكائنات تظهر بشكل ديناميكي. بدلاً من دمجها في التعليمات البرمجية الخاصة بك عند تصميم صفحة الويب الخاصة بك ، قم بإضافة مربعات نص حسب الحاجة وإقناع زوار الموقع في نفس الوقت.

إنشاء مربع نص

قبل إنشاء مربع نص ، يجب أن تفهم ما هو مربع النص. يعرفها HTML كعلامة إدخال كما هو موضح في المثال التالي:

تنشئ علامة الإدخال هذه مربع نص يحتوي على سمتين مهمتين ؛ المعرف والنوع. تخبر سمة النوع ، التي تكون قيمتها "نص" ، المتصفحات بإنشاء مربع نص بدلاً من نوع آخر من عناصر التحكم مثل الزر. يمكن أن تكون سمة المعرف ، وهي اختيارية ، مفيدة إذا كنت بحاجة إلى معالجة مربع النص لاحقًا. يحتوي خيار القيمة ، وهو أيضًا اختياري ، على القيمة التي ترغب في رؤيتها في مربع النص عند فتح صفحة الويب.

مربعات النص الديناميكي

لا يهتم HTML عندما تحدد سمات عنصر طالما أنك تمنحهم قيمًا في مكان ما. هذا يعني أن لديك القدرة على إنشاء عنصر مربع نص ديناميكيًا وتعيين سماته في أي وقت تريده. تجعل الدالة document.createElement هذا ممكنًا كما هو موضح أدناه:

var box = document.createElement ("إدخال") ؛

هذا كل ما يتطلبه الأمر لإنشاء عنصر إدخال HTML وتعيينه إلى متغير باسم "box". لا يصبح كائن المربع مربع نص حتى تقوم بإعطاء سمة النوع قيمة "نص" كما هو موضح في هذا المثال:

box.type = "text" ؛

تكامل صفحة الويب

يُلحق هذا الكود أدناه مربع النص بمستند HTML. باستخدام وظيفة appendChild المفيدة:

document.body.appendChild (مربع) ؛

إذا كنت ترغب في إلحاق مربع النص بعد عنصر تحكم معين ، فاستخدم العبارة التالية بدلاً من ذلك:

document.getElementById ("some_Element_ID"). appendChild (مربع) ؛

استبدل "some_Element_ID" باسم العنصر الذي تريد إلحاق مربع النص بعده. على سبيل المثال ، إذا كان هذا العنصر زرًا معرّفه هو "button1" ، فستظهر عبارة appendChild على النحو التالي:

document.getElementById ("button1"). appendChild (مربع) ؛

السمات الاختيارية

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

box.value = boxValue ؛ box.id = boxID ؛

قم بتمرير قيم boxValue و boxID إلى الوظيفة ، ويتم تطبيق هذه السمات على مربع النص. إذا قمت بتعيين قيمة معرف ، فيمكنك استخدامها لاحقًا لتحديث خصائص مربع النص كما هو موضح في المثال أدناه:

var boxObject = document.getElementById (boxID) ، boxObject.style.backgroundColor = "red" ؛

تحصل العبارة الأولى على مرجع لمربع النص وتغير العبارة الأخيرة لون خلفية مربع النص إلى اللون الأحمر.