Paano Lumikha ng isang Text Box na Dynamically sa JavaScript

Ang ilan ay tinatawag itong mahika - ang kakayahang gumawa ng mga bagay na biglang lumitaw nang wala saanman. Maaari kang lumikha ng ganitong uri ng mahika sa iyong website gamit ang ilang mga linya ng JavaScript. Ang mga kahon ng teksto, halimbawa, ay mahusay na mga sangkap ng HTML na gagamitin kapag natututo na palabasin ang mga bagay nang pabagu-bago. Sa halip na maitayo ang mga ito sa iyong code kapag dinisenyo mo ang iyong pahina sa Web, magdagdag ng mga kahon ng teksto kung kinakailangan at mapahanga ang mga bisita sa site nang sabay.

Paglikha ng Text Box

Bago maganap ang isang text box, dapat mong maunawaan kung ano ang isang text box. Alam ito ng HTML bilang isang input tag tulad ng ipinakita sa sumusunod na halimbawa:

Lumilikha ang input tag na ito ng isang text box na may dalawang mahahalagang katangian; id at uri. Ang katangiang uri, na ang halaga ay "teksto," ay nagsasabi sa mga browser na lumikha ng isang kahon ng teksto sa halip na isa pang uri ng kontrol tulad ng isang pindutan. Ang katangiang id, na opsyonal, ay maaaring maging madaling gamiting kung kailangan mong manipulahin ang kahon ng teksto sa paglaon. Ang opsyon sa halaga, na opsyonal din, ay naglalaman ng halagang nais mong makita sa text box kapag bumukas ang Web page.

Mga Dynamic na Kahon ng Teksto

Walang pakialam ang HTML kapag tinukoy mo ang mga katangian ng isang elemento hangga't bibigyan mo sila ng mga halaga sa kung saan. Nangangahulugan ito na mayroon kang kakayahang lumikha ng isang elemento ng kahon ng teksto nang pabagu-bago at itakda ang mga katangian nito anumang oras na gusto mo. Ginagawa ng pagpapaandar ng document.createElement na posible ito tulad ng ipinakita sa ibaba:

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

Iyon lang ang kinakailangan upang lumikha ng isang elemento ng pag-input ng HTML at italaga ito sa isang variable na pinangalanang "kahon." Ang object ng kahon ay hindi naging isang text box hanggang sa maibigay mo ang uri ng katangian ng isang halagang "teksto" tulad ng ipinakita sa halimbawang ito:

box.type = "text";

Pagsasama sa Pahina ng Web

Ang code na ito sa ibaba ay idinagdag ang kahon ng teksto sa dokumento ng HTML. Ginagamit ang kapaki-pakinabang na pag-andar ng appendChild:

document.body.appendChild (kahon);

Kung nais mong idagdag ang kahon ng teksto pagkatapos ng isang tukoy na kontrol, gamitin ang sumusunod na pahayag sa halip:

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

Palitan ang "some_Element_ID" ng pangalan ng elemento pagkatapos na nais mong idagdag ang text box. Halimbawa, Kung ang elementong iyon ay isang pindutan na ang ID ay "button1," lalabas ang pahayag ng appendChild tulad ng sumusunod:

document.getElementById ("button1"). appendChild (kahon);

Opsyonal na Mga Katangian

Ang iyong bagong text box ay gagana nang perpekto gamit ang code na ito. Lumikha lamang ng isang pag-andar ng JavaScript na naglalaman ng pahayag at tawagan ito tuwing kailangan mo ng isang text box. Gayunpaman, maaari mo ring itakda ang halaga ng text box at mga katangian ng ID tulad ng sumusunod:

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

Ipasa ang mga halaga ng boxValue at boxID sa pagpapaandar, at inilalapat nito ang mga katangiang iyon sa text box. Kung magtalaga ka ng isang halaga ng ID, maaari mo itong magamit sa paglaon upang i-update ang mga katangian ng text box tulad ng ipinakita sa halimbawa sa ibaba:

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

Ang unang pahayag ay nakakakuha ng isang sanggunian sa text box at ang huling pahayag ay binago ang kulay ng background ng text box sa pula.

Kamakailang mga Post

$config[zx-auto] not found$config[zx-overlay] not found