Stiepjas palielina par saturu, textarea

Web ir neizsmeļams piegāde minerālu padomus un idejas. Internets ir, pēc definīcijas, vidē, kur katru dienu contuna pārbaudot jaunas idejas dzimst, daži citi ģēnijs, vienkārši ziņkārīgs un interesanti.

No viedokļa web dizains, viens no "specefekti", ka es gribētu, ir dinamiski pārvaldīt lieluma lielu teksta satura izmaiņas ievada lietotājs. In Īsumā: Vairāk satura rakstīt un lielāka kļūst textarea. No psiholoģiskā viedokļa tas ir kā aicinājums turpināt rakstīt ekvivalents sakot "hey jūs vēlaties rakstīt, kā arī, nav vietas."

Šajā rakstā es piedāvāju vienkāršu JavaScript funkciju, lai apstrādātu šo jauku efektu. Attiecīgā funkcija nav nekas, bet pagarināt textarea, ja to saturs pārsniedz tā dabiskās spējas (izvairīties, faktiski, izskatu nomāktība vertikāla josla). Šeit ir kods:

 moreWords funkciju (id, maxheight) {



  



 / / Izveidot mainīgo, lai piekļūtu stila īpašības textarea



  



 id: document.getElementById (id);



  

  



 / / Ja es nevaru iet bez darīt kaut ko



  



 ja atgriešanās (txtarea!);



  

  



 / / Izveidot mainīgais, sākotnēji, ja vien pašreizējais augstums textarea



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Ja augstums nav noteikts, vai tas ir lielāks nekā pašreizējais ...



  



 if (maxheight |! | maxheight> newHeight) {



    

    



 / / Jauna noteikt newHeight lielāku augstumu saturs (scrollHeight) vērtību un tās pašreizējo vērtību,



    



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



    

    



 / / Ja augstums ir noteikts ..



    



 if (maxheight)



      



 / / Pārdefinēt no newHeight vērtību noteikt mazāko maksimālo augstumu (maxheight), un tās pašreizējo vērtību,



      



 newHeight = Math.min (maxheight, newHeight);





    



 / / Ja aprēķinātais augstums (newHeight) ir lielāka nekā esošais textarea



    



 / / Make izmaiņas un paildzinātu textarea



    



 ja (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "slēpto";



    



 }



  



 }



  



 / / Ja maksimālais augstums ir sasniegts parādīt ritjoslas



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

Funkcija ir nepieciešami divi parametri, obligāta (textarea ID, uz kuriem attiecas efekts) un izvēles (jebkuru augstums pikseļos).

Par dažādus pasākumus izmanto, lai izveidotu darboties es uzskatu, ka ir maz, lai pievienotu komentārus jau kodu.

Funkciju lietošana ir ļoti vienkārša: mūsu textarea onkeyup gadījumā uzsāk funkciju, tas nekas, bet atkārtoti aprēķināt par katru nospiests taustiņš, ja augstums ir piemērots ievietoto informāciju par:

 



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

 

Darba piemērs ierosinātās kodu var apskatīt šajā lapā .

Vienīgais ierobežojums šo funkciju, ir nespēja līgumu, ja lietotājs dzēš tekstu ... šajā gadījumā, textarea joprojām vecais izmēru samazināšanas, jo mūsu kods ir paredzēts vienīgi paplašināšanu vietu un nevis tās kontrakcijas. Tomēr, ja vēlaties, varat pievienot šo funkciju, pievienojot dažas koda rindiņas.