Stretching øker for innholdet i et tekstfelt

Nettet er en uuttømmelig tilførsel av mineral hint og ideer. Internett er, per definisjon, et miljø der hver dag contuna utprøving av nye ideer fødes, noen andre geni, bare nysgjerrig og interessant.

Fra synspunkt av web design, en av de "spesielle effekter" som jeg foretrekker er dynamisk styring av størrelsen av en stor tekst innhold endringer ført av brukeren. I et nøtteskall: mer innhold skriver du, og desto større blir textarea. Fra et psykologisk synspunkt er det en invitasjon til å fortsette å skrive det samme som å si "hei du ønsker å skrive så godt, er det ikke rom."

I denne artikkelen vil jeg foreslå en enkel JavaScript-funksjon til å håndtere denne fine effekten. Funksjonen i spørsmålet gjør ingenting, men forlenge textarea når innholdet overskride sin naturlige kapasitet (unngå, faktisk, utseende motløshet vertikal strek). Her er koden:

 moreWords funksjon (id, maxheight) {



  



 / / Opprett en variabel tilgang til stilen egenskaper textarea



  



 id: document.getElementById (id);



  

  



 / / Hvis jeg ikke kan gå ut uten å gjøre noe



  



 hvis avkastning (txtarea!);



  

  



 / / Opprett en variabel som i utgangspunktet mindre aktuelle høyden på tekstfeltet



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Hvis høyden ikke er satt eller er dette større enn den nåværende ...



  



 if (maxheight |! | maxheight> newHeight) {



    

    



 / / Omdefiner verdien av å identifisere newHeight større høyden av innholdet (scrollHeight) og sin nåværende verdi



    



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



    

    



 / / Hvis høyden er satt ..



    



 if (maxheight)



      



 / / Omdefiner verdien av newHeight identifisere de mindre av maksimal høyde (maxheight) og sin nåværende verdi



      



 newHeight = Math.min (maxheight, newHeight);





    



 / / Dersom beregnet høyde (newHeight) er større enn dagens textarea



    



 / / Gjør endringen og forleng textarea



    



 if (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "hidden";



    



 }



  



 }



  



 / / Hvis maksimal høyde er nådd monster rullefeltet



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

Funksjonen tar to parametre, en obligatorisk (det textarea ID som skal gjelde virkningen) og en valgfri (valgfri høyde i piksler).

Om de ulike trinnene som brukes til å lage funksjonen jeg tror det er lite å legge til kommentarer allerede i koden.

Bruken av funksjonen er veldig enkel: våre textarea onkeyup event lanserer den funksjonen som ikke gjør annet enn re-beregne, for hver tast trykkes, dersom høyden er passende for innholdet lagt ut på:

 



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

 

En arbeidsgruppe eksempel på den foreslåtte koden kan sees på denne siden .

Den eneste grensen for denne funksjonen er manglende evne til kontrakten hvis brukeren sletter teksten ... i dette tilfellet er textarea fremdeles den gamle størrelsen på reduksjonen, fordi vår kode er konstruert utelukkende for utvidelse av plass og ikke for sammentrekning sin. Men hvis du ønsker det, kan du legge til denne funksjonen ved å legge til noen få linjer med kode.