Sådan oprettes en tekstboks dynamisk i JavaScript

Nogle kalder det magi - evnen til at gøre objekter vises pludselig ude af ingenting. Du kan oprette denne slags magi på din hjemmeside ved hjælp af et par linjer af JavaScript. Tekstbokse, for eksempel, er gode HTML-elementer, der skal bruges, når du lærer at gøre objekter vises dynamisk. I stedet for at opbygge dem i din kode, når du designer din webside, skal du tilføje tekstbokse efter behov og imponere besøgende på samme tid.

Tekstboksoprettelse

Inden en tekstboks materialiseres, skal du forstå, hvad en tekstboks er. HTML kender det som en input tag som vist i følgende eksempel:

Denne input tag skaber en tekstboks, der har to vigtige attributter; id og type. Typetypen, hvis værdi er "tekst", fortæller browsere at oprette en tekstboks i stedet for en anden type kontrol som en knap. ID-attributten, som er valgfri, kan være nyttig, hvis du skal manipulere tekstfeltet senere. Værdiindstillingen, som også er valgfri, indeholder den værdi, du gerne vil se i tekstfeltet, når websiden åbnes.

Dynamiske tekstbokse

HTML er ligeglad, når du definerer et elements attributter, så længe du giver dem værdier et eller andet sted. Det betyder, at du har evnen til at skabe et tekstfeltelement dynamisk og indstille dets attributter, når som helst. Funktionen document.createElement gør det muligt som vist nedenfor:

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

Det er alt, hvad der kræves for at oprette et HTML-inputelement og tildele det til en variabel med navnet "box". Kasseobjektet bliver ikke en tekstboks, indtil du giver sin typeattribut en værdi af "tekst" som vist i dette eksempel:

box.type = "text";

Webside integration

Denne kode nedenfor tilføjer tekstboksen til HTML-dokumentet. Brug af den nyttige appendChild-funktion:

document.body.appendChild (kassen);

Hvis du gerne vil tilføje tekstboksen efter en bestemt kontrol, skal du bruge følgende sætning i stedet for:

document.getElementById ( "some_Element_ID") appendChild (boks).;

Udskift "some_Element_ID" med navnet på elementet, hvorefter du vil tilføje tekstfeltet. Hvis for eksempel elementet var en knap, hvis id var "button1", vises appendChild-sætningen som følger:

document.getElementById ( "Button1") appendChild (boks).;

Valgfrie attributter

Din nye tekstboks vil fungere perfekt ved hjælp af denne kode. Du skal blot oprette en JavaScript-funktion, der indeholder sætningen og kalde den, når du har brug for en tekstboks. Du kan dog også indstille tekstboksens værdi og ID-attributter som følger:

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

Pass værdierne for boxValue og boxID til funktionen, og det anvender disse attributter i tekstboksen. Hvis du tildeler en ID-værdi, kan du bruge den senere til at opdatere tekstboksens egenskaber som vist i eksemplet nedenfor:

var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "rød";

Den første sætning får en henvisning til tekstboksen, og den sidste sætning ændrer tekstboksens baggrundsfarve til rød.

 

Efterlad Din Kommentar