Creşte de stretching pentru conţinutul unui textarea

Web-ul este o sursa inepuizabila de informatii de minerale şi de idei. Internetul este, prin definiţie, un mediu în cazul în care în fiecare zi contuna testarea noilor idei se nasc, unele geniu altă parte, pur si simplu curioase si interesante.

Din punct de vedere al web design, unul dintre "efecte speciale" pe care am prefera să o gestionare dinamică a de dimensiunea unei schimbări mari de continut text introdus de utilizator. Într-un cuvânt: conţinut mai scrieţi şi cu atât mai mare devine textarea. Dintr-un punct de vedere psihologic, este o invitaţie de a continua să scrie echivalente de a spune "Hei, vrei să scrie, de asemenea, nu există nici o cameră."

În acest articol propun o functie JavaScript simplu pentru a se ocupe de acest efect frumos. Funcţia în cauză nu face decât să prelungească textarea atunci când conţinutul depăşeşte capacitatea sale naturale (evitând, în fapt, apariţia de respingere bara verticală). Iată codul:

 moreWords funcţie (id, maxheight) {



  



 / / Crearea unei variabile pentru a accesa proprietăţile de stil ale textarea



  



 id: document.getElementById (id);



  

  



 / / Dacă nu pot ieşi fără a face nimic



  



 dacă (txtarea!) întoarcere;



  

  



 / / Crearea unei variabile care iniţial cu excepţia cazului în înălţimea actuală a textarea



  



 var = newHeight txtarea.clientHeight;



  

  



 / / În cazul în care înălţimea nu a fost stabilit sau aceasta este mai mare decât curentul ...



  



 dacă (maxheight |! | maxheight> newHeight) {



    

    



 / / Redefinirea valoarea de identificare newHeight cea mai mare înălţime de conţinut (scrollHeight) şi valoarea sa actuală



    



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



    

    



 / / Dacă înălţimea a fost stabilită ..



    



 dacă (maxheight)



      



 / / Redefinirea valoarea newHeight identifica cea mai mică dintre înălţimea maximă (maxheight) şi valoarea sa actuală



      



 newHeight = Math.min (maxheight, newHeight);





    



 / / În cazul în care înălţimea calculat (newHeight) este mai mare decât textarea curent



    



 / / Face schimbarea si alungirea textarea



    



 dacă (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "ascunse";



    



 }



  



 }



  



 / / În cazul în care înălţimea maximă este atinsă arată bara de defilare



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

Funcţia are doi parametri, un obiectiv minim obligatoriu (textarea ID-ul de pe care se aplica efectul) şi, opţional, un (orice înălţime în pixeli).

Despre etapele diferite utilizate pentru a crea funcţia cred că există puţine pentru a adăuga la comentarii deja în codul.

Utilizare a funcţiei este foarte simplă: evenimentul nostru textarea onkeyup lansează funcţia pe care nu face nimic, dar re-calcula, pentru fiecare tasta apasata, în cazul în care înălţimea este adecvată pentru continutul postat pe:

 



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

 

Un exemplu de lucru de cod propuse pot fi vizualizate la această pagină .

Singura limită a acestei funcţii este incapacitatea de a contractului, dacă utilizatorul şterge textul ... în acest caz, textarea este încă de reducere a dimensiunii vechi, deoarece codul nostru este conceput exclusiv pentru extinderea de spaţiu, şi nu pentru contractia acesteia. Cu toate acestea, dacă doriţi, puteţi adăuga acestei funcţii prin adaugarea cateva linii de cod.