Preťahovanie zvyšuje za obsah Textarea

Web je nepreberné množstvo minerálnych tipy a nápady. Internet je, samozrejme, prostredie, kde sa rodí každý deň contuna testovanie nových nápadov, iné nadanie, proste zvedavý a zaujímavý.

Z hľadiska dizajnu webu, jeden z "špeciálnych efektov", ktoré dávam prednosť, je dynamické riadenie veľkosti veľké zmeny textového obsahu zadané užívateľom. V kocke: ďalší obsah píšete a čím väčší bude textarea. Z psychologického hľadiska je to výzva, aby aj naďalej písať ekvivalent hovorí: "Hele chcete písať rovnako, nie je miesto."

V tomto článku som sa navrhnúť jednoduchý JavaScript funkciu zvládnuť túto pekný efekt. Funkcia v pochybnosť nie je nič iného, ​​než predĺžiť Textarea Ak obsah vyšší ako jeho prirodzené schopnosti (vyhýbať sa v skutočnosti vzhľad skľúčenosti zvislá čiara). Tu je kód:

 moreWords funkcie (id, max-výšky) {



  



 / / Vytvorenie premenné pre prístup k vlastnosti štýlu textového poľa



  



 ID: document.getElementById (id);



  

  



 / / Ak nemôžem ísť von bez toho, aby niečo robiť



  



 Ak sa return (txtarea!);



  

  



 / / Vytvorenie premennej, ktorá spočiatku nie je aktuálny výšku textového poľa



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Ak je výška nie je stanovená, alebo je to väčšie ako aktuálne ...



  



 if (max-výšky |! | max-výšky> newHeight) {



    

    



 / / Nová definícia hodnoty identifikáciu newHeight väčšiu výšku obsahu (scrollHeight) a jeho súčasná hodnota



    



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



    

    



 / / Ak je výška bola nastavená ..



    



 if (max-výšky)



      



 / / Nová definícia hodnoty newHeight identifikáciu menšie Maximálna výška (max-výšky) a jeho súčasná hodnota



      



 newHeight = Math.min (max-výšky, newHeight);





    



 / / Ak je vypočítaná výška (newHeight) je väčšia ako aktuálna textového poľa



    



 / / Urobiť zmenu a predĺžiť textového poľa



    



 if (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "skrytý";



    



 }



  



 }



  



 / / Ak je maximálna výška je dosiahnuté zobrazovať posuvník



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

Funkcia má dva parametre, povinný (ID textového poľa, na ktorom je použiť efekt) a voliteľné (ľubovoľnej výške v pixeloch).

O jednotlivé kroky slúži na vytvorenie funkcie Verím, že existuje len málo pridať k vyjadrenia už v kóde.

Použitie funkcie je veľmi jednoduchý: naše textarea onkeyup prípade spustí funkciu, ktorá nerobí nič, ale znovu kalkulovať pre jednotlivé stlačené klávesy, ak je výška je vhodná pre Obsah na:

 



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

 

Pracovné príklad návrhu kód si môžete prezrieť na tejto stránke .

Jediným obmedzením tejto funkcie je neschopnosť zmluvy, ak užívateľ zmaže text ... V tomto prípade textového poľa sa stále stará zníženie veľkosti, pretože náš kód je určený výhradne pre rozšírenie priestoru a nie pre jeho kontrakciu. Avšak, ak chcete, môžete pridať túto funkciu pridaním niekoľkých riadkov kódu.