جاوا اسکرپٹ میں متحرک طور پر ٹیکسٹ باکس کیسے بنائیں

کچھ لوگ اسے جادو کہتے ہیں - کہیں بھی اچانک چیزوں کو ظاہر کرنے کی صلاحیت۔ آپ جاوا اسکرپٹ کی کچھ لائنوں کا استعمال کرکے اپنی ویب سائٹ پر اس طرح کا جادو تخلیق کرسکتے ہیں۔ مثال کے طور پر ٹیکسٹ بکس اچھے HTML عناصر ہیں جب چیزوں کو متحرک طور پر ظاہر ہونا سیکھتے ہیں۔ جب آپ اپنے ویب پیج کو ڈیزائن کرتے ہو تو ان کو اپنے کوڈ میں بنانے کی بجائے ، ضرورت کے مطابق ٹیکسٹ بکس شامل کریں اور بیک وقت سائٹ کے زائرین کو متاثر کریں۔

متن خانہ تخلیق

ایک ٹیکسٹ باکس کو مالدار بنانے سے پہلے ، آپ کو سمجھنا ہوگا کہ ٹیکسٹ باکس کیا ہے۔ ایچ ٹی ایم ایل اسے ایک ان پٹ ٹیگ کے طور پر جانتا ہے جیسا کہ مندرجہ ذیل مثال میں دکھایا گیا ہے:

یہ ان پٹ ٹیگ ایک ٹیکسٹ باکس تخلیق کرتا ہے جس میں دو اہم صفات ہیں۔ ID اور قسم۔ قسم کا وصف ، جس کی قدر "متن" ہے ، براؤزرز کو کسی دوسرے قسم کے کنٹرول جیسے بٹن کی بجائے ٹیکسٹ باکس بنانے کے لئے کہتی ہے۔ اگر آپ کو بعد میں ٹیکسٹ باکس میں ہیرا پھیری کرنے کی ضرورت ہو تو ID اختصار ، جو اختیاری ہے ، کارآمد ہوسکتا ہے۔ ویلیو آپشن ، جو اختیاری بھی ہے ، اس میں وہ قدر ہوتی ہے جو آپ ویب صفحے کے کھلنے پر ٹیکسٹ باکس میں دیکھنا چاہتے ہیں۔

متحرک متن خانوں

جب آپ کسی عنصر کو ان کی قدر دیتے ہیں تو جب تک آپ کسی عنصر کی خصوصیات کو بیان کرتے ہو تو HTML کو فرق نہیں پڑتا ہے۔ اس کا مطلب یہ ہے کہ آپ میں متحرک طور پر ٹیکسٹ باکس عنصر بنانے کی صلاحیت ہے اور جب بھی آپ اس کی خصوصیات کو مرتب کرسکتے ہیں۔ document.createElement فنکشن اس کو ممکن بناتا ہے جیسا کہ ذیل میں دکھایا گیا ہے:

var box = document.createElement ("ان پٹ")؛

HTML ان پٹ عنصر بنانے اور اسے "باکس" نامی متغیر کو تفویض کرنے میں صرف اتنا ہی لگتا ہے۔ باکس آبجیکٹ اس وقت تک ٹیکسٹ باکس نہیں بن جاتا جب تک کہ آپ اس قسم کی خصوصیت کو "ٹیکسٹ" کی قدر نہیں دیتے ہیں جیسا کہ اس مثال میں دکھایا گیا ہے:

box.type = "متن"؛

ویب پیج انٹیگریشن

ذیل میں یہ کوڈ ٹیکسٹ باکس کو HTML دستاویز میں شامل کرتا ہے۔ مفید ضمیمہ نما فنکشن کا استعمال کرتے ہوئے:

دستاویز.body.appendChild (باکس)؛

اگر آپ کسی خاص کنٹرول کے بعد ٹیکسٹ باکس کو شامل کرنا چاہتے ہیں تو ، اس کے بجائے مندرجہ ذیل بیان کا استعمال کریں:

document.getElementById ("some_Element_ID")۔ appendChild (باکس)؛

"some_Element_ID" کو عنصر کے نام کے ساتھ تبدیل کریں جس کے بعد آپ ٹیکسٹ باکس کو شامل کرنا چاہیں گے۔ مثال کے طور پر ، اگر وہ عنصر ایک بٹن ہوتا جس کی شناخت "بٹن 1" تھی ، تو اسپینڈ چائلڈ کا بیان مندرجہ ذیل ظاہر ہوگا:

document.getElementById ("button1")۔ appendChild (باکس)؛

اختیاری صفات

آپ کا نیا ٹیکسٹ باکس اس کوڈ کا استعمال کرکے بالکل کام کرے گا۔ بس جاوا اسکرپٹ کا فنکشن تشکیل دیں جس میں بیان موجود ہو اور جب بھی آپ کو ٹیکسٹ باکس کی ضرورت ہو اسے کال کریں۔ تاہم ، آپ ٹیکسٹ باکس کی قدر اور ID خصوصیات بھی مندرجہ ذیل ترتیب دے سکتے ہیں۔

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

باکس ویلیو اور باکس ایڈ کی قدروں کو فنکشن میں منتقل کریں ، اور اس سے ٹیکسٹ باکس میں ان صفات کا اطلاق ہوتا ہے۔ اگر آپ کسی ID کی قیمت تفویض کرتے ہیں تو ، آپ اسے بعد میں ٹیکسٹ باکس کی خصوصیات کو اپ ڈیٹ کرنے کے لئے استعمال کرسکتے ہیں جیسا کہ ذیل کی مثال میں دکھایا گیا ہے:

var boxObject = document.getElementById (boxID)؛ boxObject.style.background रंग = "سرخ"؛

پہلے بیان سے ٹیکسٹ باکس کا حوالہ مل جاتا ہے اور آخری بیان ٹیکسٹ باکس کے پس منظر کا رنگ سرخ کر دیتا ہے۔