Stretching verhoogt voor de inhoud van een textarea

Het web is een onuitputtelijke bron van minerale tips en ideeën. Het internet is, per definitie, een omgeving waar elke dag contuna het testen van nieuwe ideeën worden geboren, een ander genie, gewoon nieuwsgierig en interessant.

Vanuit het oogpunt van web design, een van de 'special effects' die ik liever is het dynamisch beheer van de grootte van een grote tekst wijzigingen in de inhoud ingevoerd door de gebruiker. In een notendop: meer inhoud je schrijft en hoe groter wordt het tekstveld. Vanuit een psychologisch oogpunt is een uitnodiging om door te gaan tot het equivalent van te zeggen schrijven "hey je wilt zo goed schrijven, is er geen ruimte."

In dit artikel stel ik een simpele JavaScript-functie om dit mooi effect te behandelen. De functie in kwestie doet niets anders dan verlengt de textarea als de inhoud groter is dan de natuurlijke capaciteit (het vermijden, in feite, de verschijning van neerslachtigheid verticale balk). Hier is de code:

 moreWords functie (id, maxheight) {



  



 / / Maak een variabele aan de stijl eigenschappen van het tekstveld toegang



  



 id: document.getElementById (id);



  

  



 / / Als ik niet kan gaan zonder iets te doen



  



 indien retournering (txtarea!);



  

  



 / / Maak een variabele die in eerste instantie, tenzij de huidige hoogte van het tekstveld



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Als de hoogte niet is ingesteld of deze groter is dan de huidige ...



  



 if (maxheight |! | maxheight> newHeight) {



    

    



 / / Nieuwe definitie van de waarde van het identificeren van newHeight hoe groter de hoogte van de inhoud (scrollHeight) en de huidige waarde



    



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



    

    



 / / Als de hoogte is ingesteld ..



    



 if (maxheight)



      



 / / Nieuwe definitie van de waarde van newHeight het identificeren van de kleinste van de maximale hoogte (maxheight) en de huidige waarde



      



 newHeight = Math.min (maxheight, newHeight);





    



 / / Als de berekende hoogte (newHeight) groter is dan de huidige textarea



    



 / / Maak de verandering en het verlengen van de textarea



    



 if (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "verborgen";



    



 }



  



 }



  



 / / Als de maximale hoogte is bereikt, geven de schuifbalk



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

De functie heeft twee parameters, een verplicht (het tekstveld van de ID op die om het effect toe te passen) en een optioneel (elke hoogte in pixels).

Over de verschillende stappen gebruikt om de functie geloof ik maak er weinig toe te voegen aan commentaar al in de code.

Het gebruik van de functie is heel eenvoudig: onze textarea onkeyup evenement lanceert de functie die niets anders dan opnieuw te berekenen doet, voor elke toets ingedrukt, als de hoogte geschikt is voor de inhoud geplaatst op:

 



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

 

Een werkend voorbeeld van de voorgestelde code kunnen bekeken worden op deze pagina .

De enige beperking van deze functie is het onvermogen te contracteren als de gebruiker verwijdert de tekst ... In dit geval is de textarea is nog steeds de oude verkleinen, omdat onze code is uitsluitend bedoeld voor de uitbreiding van de ruimte en niet voor de contractie. Echter, als u wilt, kunt u deze functie toe te voegen door het toevoegen van een paar regels code.