Як динамічно створити текстове поле в JavaScript

Деякі називають це магією - здатність змушувати предмети раптово з’являтися з нізвідки. Ви можете створити цю магію на своєму веб-сайті, використовуючи кілька рядків JavaScript. Наприклад, текстові поля - це хороші елементи HTML, які слід використовувати під час навчання динамічного відображення об’єктів. Замість того, щоб вбудовувати їх у свій код при розробці веб-сторінки, додайте текстові поля за необхідності та одночасно вражайте відвідувачів сайту.

Створення текстового поля

Перш ніж втілити текстове поле, ви повинні зрозуміти, що таке текстове поле. HTML знає його як вхідний тег, як показано в наступному прикладі:

Цей тег введення створює текстове поле з двома важливими атрибутами; ідентифікатор і тип. Атрибут type, значення якого "text", говорить браузерам створювати текстове поле замість іншого типу елемента керування, наприклад кнопки. Атрибут id, який не є обов’язковим, може стати в нагоді, якщо пізніше вам потрібно буде маніпулювати текстовим полем. Параметр значення, який також не є обов’язковим, містить значення, яке ви хотіли б бачити в текстовому полі, коли відкриється веб-сторінка.

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

HTML все одно, коли ви визначаєте атрибути елемента, якщо ви десь надаєте їм значення. Це означає, що у вас є можливість динамічно створювати елемент текстового поля та встановлювати його атрибути в будь-який час. Функція document.createElement робить це можливим, як показано нижче:

var box = document.createElement ("вхід");

Це все, що потрібно для створення елемента вводу HTML і присвоєння йому змінної з назвою "box". Об'єкт box не стає текстовим полем, поки ви не надасте його атрибуту type значення "text", як показано в цьому прикладі:

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

Інтеграція веб-сторінок

Цей код нижче додає текстове поле до документа HTML. Використовуючи корисну функцію appendChild:

document.body.appendChild (поле);

Якщо ви хочете додати текстове поле після певного елемента керування, використовуйте натомість такий вираз:

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

Замініть "some_Element_ID" на ім'я елемента, після якого ви хочете додати текстове поле. Наприклад, якби цей елемент був кнопкою, ідентифікатор якої був "button1", оператор appendChild буде виглядати наступним чином:

document.getElementById ("кнопка1"). appendChild (поле);

Необов’язкові атрибути

Ваше нове текстове поле буде прекрасно працювати, використовуючи цей код. Просто створіть функцію JavaScript, яка містить оператор, і викликайте її, коли вам знадобиться текстове поле. Однак ви також можете встановити значення та атрибути ідентифікатора текстового поля наступним чином:

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

Передайте функції boxValue та boxID функції, і вона застосовує ці атрибути до текстового поля. Якщо ви призначите значення ідентифікатора, ви можете використовувати його пізніше для оновлення властивостей текстового поля, як показано в прикладі нижче:

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

Перше твердження отримує посилання на текстове поле, а останнє твердження змінює колір тла текстового поля на червоний.