Stretching stigninger for indholdet af et textarea

Internettet er en uudtømmelig kilde af mineralsk tips og ideer. Internettet er, per definition, et miljø, hvor hver dag contuna afprøvning af nye idéer bliver født, nogle andre geni, simpelthen nysgerrige og interessante.

Fra det synspunkt web-design, en af de "special effects", som jeg foretrækker er dynamisk styring af den på størrelse med en stor tekst indhold ændres indtastet af brugeren. I en nøddeskal: mere indhold, du skriver, og jo større bliver textarea. Fra et psykologisk synspunkt er det en invitation til at fortsætte med at skrive hvad der svarer til at sige: "Hey, du ønsker at skrive så godt, er der ikke plads."

I denne artikel vil jeg foreslå en simpel JavaScript-funktion til at håndtere denne pæn effekt. Den pågældende funktion gør ingenting, men forlænger textarea, når indholdet overstiger dens naturlige evne (for at undgå, i virkeligheden, udseendet af modløshed lodret streg). Her er koden:

 moreWords funktion (id, maxheight) {



  



 / / Opret en variabel til at få adgang til den stil egenskaber textarea



  



 id: document.getElementById (id);



  

  



 / / Hvis jeg ikke kan gå ud uden at gøre noget



  



 hvis afkast (txtarea!);



  

  



 / / Opret en variabel, der i første omgang, medmindre den nuværende højde af textarea



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Hvis højden ikke er indstillet eller denne er større end den nuværende ...



  



 if (maxheight |! | maxheight> newHeight) {



    

    



 / / Omdefinere værdien af ​​at identificere newHeight jo større højden af ​​indhold (scrollHeight) og dens nuværende værdi



    



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



    

    



 / / Hvis højden er indstillet ..



    



 if (maxheight)



      



 / / Omdefinere værdien af ​​newHeight identificere den mindste af de maksimale højde (maxheight) og dens nuværende værdi



      



 newHeight = Math.min (maxheight, newHeight);





    



 / / Hvis den beregnede højde (newHeight) er større end den nuværende textarea



    



 / / Udfør ændringen og forlænge textarea



    



 if (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "skjulte";



    



 }



  



 }



  



 / / Hvis den maksimale højde er nået vise rullepanelet



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

Funktionen tager to parametre, en obligatorisk (det textarea ID, hvorpå der kan anvende den effekt) og en valgfri (enhver højde i pixels).

Om de forskellige trin, der anvendes til at oprette den funktion jeg tror, ​​at der er lidt at tilføje til bemærkninger, der allerede i koden.

Brugen af funktionen er meget enkel: Vores textarea onkeyup begivenhed lancerer den funktion, der gør ingenting, men genberegne, for hver tast, som aktiveres, hvis højde er passende for indhold lagt ud på:

 



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

 

En arbejdsgruppe eksempel på den foreslåede kodeks kan ses på denne side .

Den eneste grænse for denne funktion er den manglende evne til kontrakten, hvis brugeren sletter teksten ... i dette tilfælde, er det textarea stadig den gamle neddeling, fordi vores kode er konstrueret udelukkende til udvidelsen af ​​plads og ikke for sin sammentrækning. Men hvis du ønsker det, kan du tilføje denne funktion ved at tilføje et par linjer kode.