Как да създадете текстово поле динамично в JavaScript

Някои го наричат ​​магия - способността да караме предметите да се появяват внезапно от нищото. Можете да създадете този вид магия на вашия уебсайт, като използвате няколко реда JavaScript. Текстовите полета например са добри HTML елементи, които да се използват, когато се учат да правят обектите да се появяват динамично. Вместо да ги вграждате във вашия код, когато проектирате вашата уеб страница, добавете текстови полета, както е необходимо, и впечатлете посетителите на сайта едновременно.

Създаване на текстово поле

Преди да накарате текстовото поле да се материализира, трябва да разберете какво представлява текстовото поле. HTML го познава като входен маркер, както е показано в следния пример:

Този входен таг създава текстово поле, което има два важни атрибута; id и тип. Атрибутът type, чиято стойност е "текст", казва на браузърите да създадат текстово поле вместо друг тип контрол, като например бутон. Атрибутът id, който не е задължителен, може да ви бъде полезен, ако по-късно трябва да манипулирате текстовото поле. Опцията стойност, която също не е задължителна, съдържа стойността, която искате да видите в текстовото поле, когато се отвори уеб страницата.

Динамични текстови полета

HTML не се интересува, когато дефинирате атрибутите на даден елемент, стига да им давате стойности някъде. Това означава, че имате възможност да създавате елемент на текстово поле динамично и да задавате атрибутите му по всяко време. Функцията document.createElement прави това възможно, както е показано по-долу:

var box = document.createElement ("input");

Това е всичко, което е необходимо, за да създадете HTML входен елемент и да го присвоите на променлива, наречена „кутия“. Обектът box не се превръща в текстово поле, докато не придадете на атрибута на типа стойност "text", както е показано в този пример:

box.type = "текст";

Интеграция на уеб страници

Този код по-долу добавя текстовото поле към HTML документа. Използвайки полезната функция appendChild:

document.body.appendChild (кутия);

Ако искате да добавите текстовото поле след конкретна контрола, вместо това използвайте следния израз:

document.getElementById ("some_Element_ID"). appendChild (поле);

Заменете "some_Element_ID" с името на елемента, след който искате да добавите текстовото поле. Например, ако този елемент е бутон, чийто идентификатор е "button1", операторът appendChild ще се появи, както следва:

document.getElementById ("button1"). appendChild (поле);

Незадължителни атрибути

Вашето ново текстово поле ще работи перфектно, използвайки този код. Просто създайте JavaScript функция, която съдържа изявлението и го извикайте винаги, когато имате нужда от текстово поле. Можете обаче да зададете атрибутите за стойност и ID на текстовото поле, както следва:

box.value = boxValue; box.id = boxID;

Предайте стойностите на boxValue и boxID към функцията и тя прилага тези атрибути към текстовото поле. Ако зададете стойност на ID, можете да го използвате по-късно, за да актуализирате свойствата на текстовото поле, както е показано в примера по-долу:

var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "червено";

Първият израз получава препратка към текстовото поле, а последният израз променя цвета на фона на текстовото поле на червен.