Tekstiruudun luominen dynaamisesti JavaScriptissä

Jotkut kutsuvat sitä maagiseksi - kyky tehdä esineitä tulee yhtäkkiä pois mistään. Voit luoda tämänkaltaisen taikan verkkosivustollasi käyttämällä muutamia JavaScript-rivejä. Esimerkiksi tekstilaatikot ovat hyviä HTML-elementtejä, joita käytetään, kun oppia tekemään esineitä dynaamisesti. Sen sijaan, että ne rakennetaan koodiin, kun suunnittelet Web-sivua, lisää tarvittaessa tekstiruutuja ja vaikutuksen tekeminen sivustokäyttäjiin samanaikaisesti.

Tekstilaatikon luominen

Ennen tekstikentän tekemistä tulee ymmärtää, mitä tekstiruutu on. HTML tuntee sen tulotunnisteena seuraavassa esimerkissä:

Tämä syöttötunniste luo tekstikentän, jossa on kaksi tärkeää ominaisuutta; tunnus ja tyyppi. Tyypin määrite, jonka arvo on "teksti", kertoo selaimille luoda tekstikentän toisen tyypin, kuten painikkeen, sijasta. ID-attribuutti, joka on valinnainen, voi olla kätevä, jos sinun täytyy muokata tekstiruutua myöhemmin. Arvo-vaihtoehto, joka on myös valinnainen, sisältää arvon, jonka haluat nähdä tekstiruudussa, kun Web-sivu avautuu.

Dynaamiset tekstilaatikot

HTML ei välitä, kun määrittelet elementin määritteet niin kauan kuin annat heille arvot jonnekin. Tämä tarkoittaa, että sinulla on kyky luoda tekstikenttäelementti dynaamisesti ja asettaa sen attribuutit milloin tahansa. Document.createElement-toiminto mahdollistaa tämän seuraavasti:

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

Se on kaikki mitä tarvitaan HTML-tuloelementin luomiseksi ja sen määrittämiseksi muuttujalle nimeltä "laatikko". Laatikon objektista ei tule tekstikenttää, ennen kuin annat tyypin määritteen "teksti", kuten tässä esimerkissä on esitetty:

box.type = "teksti";

Web-sivun integrointi

Alla oleva koodi lisää tekstikentän HTML-dokumenttiin.käyttäen hyödyllistä appendChild-toimintoa:

document.body.appendChild (laatikko);

Jos haluat lisätä tekstikentän tietyn ohjauksen jälkeen, käytä seuraavaa väitettä:

document.getElementById ( "some_Element_ID"). AppendChild (laatikko);

Korvaa "some_Element_ID" sen elementin nimellä, jonka jälkeen haluat lisätä tekstikentän. Esimerkiksi, jos tämä elementti oli painike, jonka tunnus oli "painike1", appendChild-lausunto ilmestyy seuraavasti:

document.getElementById ( "painike1"). AppendChild (laatikko);

Valinnaiset ominaisuudet

Uusi tekstiruutu toimii täydellisesti käyttämällä tätä koodia. Luo yksinkertaisesti JavaScript-toiminto, joka sisältää lausunnon ja kutsuu sitä aina, kun tarvitset tekstiruutua. Voit kuitenkin myös asettaa tekstikentän arvon ja tunnuksen määritteet seuraavasti:

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

Siirrä boxValue- ja boxID-arvot funktiolle, ja se soveltaa näitä määritteitä tekstiruutuun. Jos annat ID-arvon, voit käyttää sitä myöhemmin päivittämään tekstikentän ominaisuudet kuten alla olevassa esimerkissä:

var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "punainen";

Ensimmäinen lausunto saa viittauksen tekstikenttään ja viimeinen lause muuttaa tekstikentän taustavärin punaiseksi.

 

Jätä Kommentti