Istezanje povećava za sadržaj textarea

Web je nepregledne zalihe mineralnih savjeti i ideje. Internet je, po definiciji, okruženju u kojem svaki dan contuna testiranje nove ideje se rađaju, neke druge genija, jednostavno znatiželjni i zanimljiv.

Iz točke gledišta web dizajna, jedan od "specijalne efekte" koji volim je dinamičan upravljanje veličine velikih tekstualnih sadržaja Promjene upisane od strane korisnika. U Ukratko: više sadržaja možete pisati i više postaje textarea. S psihološke točke gledišta to je poziv da i dalje pisati ekvivalent govoreći: "hej želite pisati, kao, nema mjesta."

U ovom članku ću predložiti jednostavan JavaScript funkcije za obradu ovu lijepu učinak. Funkcija u pitanju ne radi ništa osim produžiti textarea kada sadržaj prelazi svoju prirodnu sposobnost (izbjegavanje, u stvari, pojava potištenosti okomita traka). Evo kod:

 moreWords funkcija (ID, maxheight) {



  



 / / Stvaranje varijable za pristup stil svojstva textarea



  



 ID: document.getElementById (id);



  

  



 / / Ako ne mogu izlaziti bez radiš ništa



  



 ako je povratak (txtarea!);



  

  



 / / Stvaranje varijabla koja u početku, osim ako trenutna visina u textarea



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Ako je visina nije postavljen ili je to veći od sadašnjeg ...



  



 if (maxheight |! | maxheight> newHeight) {



    

    



 / / Redefiniranje vrijednost utvrđivanja newHeight veće visine sadržaja (scrollHeight) i trenutna vrijednost



    



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



    

    



 / / Ako je visina bila postavljena ..



    



 if (maxheight)



      



 / / Redefiniranje vrijednost newHeight utvrđivanja manji od maksimalne visine (maxheight) i trenutna vrijednost



      



 newHeight = Math.min (maxheight, newHeight);





    



 / / Ako je izračunata visina (newHeight) je veća od trenutne textarea



    



 / / Provjerite promjene i produljiti textarea



    



 if (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "skriveni";



    



 }



  



 }



  



 / / Ako je maksimalna visina je postignut pokazati klizača



  



 txtarea.style.overflow = "Auto";

  

  



 }

   





 }

Funkcija uzima dva parametra, obavezno (textarea iskaznica na kojoj će se primijeniti efekt) i dodatni (bilo koje visine u pikselima).

O različite korake korištene za stvaranje funkciju vjerujem da je malo dodati komentare već u kodu.

Korištenje funkcija je vrlo jednostavna: naš textarea onkeyup događaj pokreće funkciju koja ne radi ništa osim ponovo izračunati za svaku pritisnutu tipku, ako je visina odgovara za sadržaj objavljen na:

 



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

 

Radna primjer predloženih kod se može vidjeti na ovoj stranici .

Jedini limit ova funkcija je nemogućnost da ugovor ako korisnik izbriše tekst ... u ovom slučaju, textarea je još uvijek stari veličine smanjenje, jer je naš kod je dizajniran isključivo za širenje prostora, a ne za skupljanje. Međutim, ako želite, možete dodati ovu značajku dodavanjem nekoliko linija koda.