Jak dynamicky vytvářet textové pole v jazyce JavaScript

Někteří říkají kouzlo - schopnost vytvářet objekty najednou z ničeho. Tento druh kouzel můžete vytvořit na svých webových stránkách pomocí několika řádků jazyka JavaScript. Textové pole jsou například dobré prvky HTML, které se používají při učení, aby se objekty zobrazovaly dynamicky. Namísto jejich vytváření do kódu při navrhování webové stránky přidejte textové pole podle potřeby a zapůsobí návštěvníky stránek současně.

Vytvoření textového pole

Než provedete textové pole, musíte pochopit, co je textové pole. HTML to ví jako vstupní značku, jak je ukázáno v následujícím příkladu:

Tato vstupní značka vytvoří textové pole, které má dva důležité atributy; id a typ. Atribut typu, jehož hodnota je "text", informuje prohlížeče, aby vytvořili textové pole namísto jiného typu ovládacího prvku, například tlačítka. Atribut id, který je volitelný, může být užitečný, pokud potřebujete manipulovat textové pole později. Volitelná hodnota, která je také volitelná, obsahuje hodnotu, kterou chcete zobrazit v textovém poli při otevření webové stránky.

Dynamické textové schránky

HTML je jedno, když definujete atributy prvku, pokud jim dáte hodnoty někde. To znamená, že máte možnost dynamicky vytvářet prvek textového pole a nastavit jeho atributy kdykoli budete chtít. Funkce document.createElement umožňuje tuto funkci, jak je uvedeno níže:

var box = dokument.createElement ("vstup");

To je vše, co potřebujete k vytvoření prvku vstupu HTML a přiřadit jej proměnné s názvem "box". Objekt pole se nestane textovým rámečkem, dokud jeho atributu typu neudělí hodnotu "text", jak je ukázáno v tomto příkladu:

box.type = "text";

Integrace webové stránky

Tento kód níže přiloží textové pole do dokumentu HTML. Použijete užitečnou funkci appendChild:

document.body.appendChild (rámeček);

Pokud chcete připojit textové pole po určitém ovládacím prvku, použijte místo toho následující příkaz:

document.getElementById ("some_Element_ID"). appendChild (rámeček);

Nahraďte "some_Element_ID" názvem prvku, po němž chcete připojit textové pole. Pokud byl například prvek tlačítkem, jehož ID bylo "tlačítko1", bude příkaz appendChild vypadat následovně:

document.getElementById ("tlačítko1") appendChild (rámeček);

Volitelné atributy

Vaše nové textové pole bude fungovat dokonale s tímto kódem. Jednoduše vytvořte funkci JavaScript, která obsahuje příkaz a zavolejte jej vždy, když potřebujete textové pole. Můžete však také nastavit atributy hodnoty a ID textového pole následujícím způsobem:

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

Předat hodnoty boxValue a boxID funkce a aplikuje tyto atributy do textového pole. Pokud přiřadíte hodnotu ID, můžete ji použít později k aktualizaci vlastností textového pole, jak je ukázáno v následujícím příkladu:

var boxObjekt = document.getElementById (boxID); boxObject.style.backgroundColor = "červená";

První příkaz získá odkaz na textové pole a poslední příkaz změní barvu pozadí textového pole na červenou.

 

Zanechte Svůj Komentář