Tempimo padidina už Textarea turinio

Internete yra neišsenkantis tiekimo mineralinių patarimų ir idėjų. Internetas yra, pagal apibrėžimą, aplinka, kurioje kiekvieną dieną contuna bandymų naujų idėjų gimsta, kai kurių kitų genijus, tiesiog smalsu ir įdomu.

Nuo atsižvelgiant web dizainas, vienas iš "specialiųjų efektų", kad aš norėčiau taškas yra dinamiškas valdymo didelės teksto turinio pokyčius įvedamas vartotojo dydis. Trumpai tariant: daugiau turinio rašote ir daugiau tampa Textarea. Nuo psichologinės požiūriu tai yra kvietimas toliau rašyti pasakyti lygiavertis "Ei norite parašyti taip pat nėra kambaryje".

Šiame straipsnyje aš pasiūlyti paprastą JavaScript "kalbos funkciją rankena šis gražus efektas. Atitinkama funkcija nieko nedaro, tačiau pratęsti Textarea kai turinį viršyti savo natūralaus gebėjimo (išvengti, iš tiesų, iš nusiminimas vertikalios juostos išvaizdą). Štai kodas:

 moreWords funkcija (id, maxheight) {



  



 / / Sukuriamas kintamasis prieigą prie stiliaus ypatybes Textarea



  



 ID: document.getElementById (id);



  

  



 / / Jei aš negaliu išeiti be daryti nieko



  



 jei grąža (txtarea!);



  

  



 / / Sukurti kintamąjį, kad iš pradžių, jeigu dabartinės aukštis Textarea



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Jei aukščio nebuvo nustatyti ar tai yra didesnis nei dabartinis ...



  



 if (maxheight |! | maxheight> newHeight) {



    

    



 / / Iš naujo nustatyti newHeight daugiau turinio aukštis (scrollHeight) vertė ir jos dabartinė vertė



    



 newHeight = Math.max (txtarea.scrollHeight, newHeight);



    

    



 / / Jei aukštis buvo nustatytas ..



    



 if (maxheight)



      



 / / Iš naujo apibrėžti newHeight vertę nustatant didžiausią aukščio (maxheight) mažesnis ir jos dabartinė vertė



      



 newHeight = Math.min (maxheight, newHeight);





    



 / / Jei apskaičiuotas aukštis (newHeight) yra didesnis nei dabartinis Textarea



    



 / / Padaryti kaita ir pailginti Textarea



    



 if (newHeight> txtarea.clientHeight) {



      



 txtarea.style.height newHeight = + "px";



      



 txtarea.style.overflow = "paslėpti";



    



 }



  



 }



  



 / / Jei maksimalus aukštis pasiekė rodo slinkties juostą



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

Ši funkcija trunka du parametrai, privalomi (Textarea savo ID kuri taikyti efektas) ir neprivalomi (bet taškų aukščio).

Apie įvairių veiksmų, naudojama siekiant sukurti funkciją, aš manau, yra šiek tiek pridėti į komentarus jau kodą.

Funkcijos naudoti yra labai paprasta: mūsų Textarea onkeyup atveju pradeda veikti, kad nieko nedaro, tačiau perskaičiuoti už kiekvieną klavišą nuspaustą, jei aukštis yra tinkamas turinį Paskelbta:

 



 <textarea onkeyup="moreWords(this)"> </ Textarea>

 

Darbo pavyzdys pasiūlė kodą galima susipažinti šiame puslapyje .

Tik apriboti šios funkcijos yra nesugebėjimas sutartį, jei vartotojas ištrina tekstą ... šiuo atveju Textarea vis dar senojo dydžio sumažinimas, nes mūsų kodas yra skirta tik vietos, o ne jo susitraukimo plėtra. Tačiau, jei norite, galite pridėti šią funkciją, pridedant keletą eilučių kodo.