Protahování zvyšuje za obsah TextArea

Web je nepřeberné množství minerálních tipy a nápady. Internet je, samozřejmě, prostředí, kde se rodí každý den contuna testování nových nápadů, jiné nadání, prostě zvědavý a zajímavý.

Z hlediska designu webu, jeden z "speciálních efektů", které dávám přednost, je dynamické řízení velikosti velké změny textového obsahu zadané uživatelem. V kostce: další obsah píšete a čím větší bude textarea. Z psychologického hlediska je to výzva, aby i nadále psát ekvivalent říká: "Hele chcete psát stejně, není místo."

V tomto článku jsem se navrhnout jednoduchý JavaScript funkci zvládnout tuto pěkný efekt. Funkce v pochybnost není nic jiného, ​​než prodloužit TextArea-li obsah vyšší než jeho přirozené schopnosti (vyhýbat se ve skutečnosti vzhled sklíčenosti svislá čára). Tady je kód:

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



  



 / / Vytvoření proměnné pro přístup k vlastnosti stylu textového pole



  



 ID: document.getElementById (id);



  

  



 / / Pokud nemůžu jít ven, aniž by něco dělat



  



 Pokud se return (txtarea!);



  

  



 / / Vytvoření proměnné, která zpočátku není aktuální výšku textového pole



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Pokud je výška není stanovena, nebo je to větší než aktuální ...



  



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



    

    



 / / Nová definice hodnoty identifikaci newHeight větší výšku obsahu (scrollHeight) a jeho současná hodnota



    



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



    

    



 / / Pokud je výška byla nastavena ..



    



 if (max-výšky)



      



 / / Nová definice hodnoty newHeight identifikaci menší Maximální výška (max-výšky) a jeho současná hodnota



      



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





    



 / / Pokud je vypočtená výška (newHeight) je větší než aktuální textového pole



    



 / / Provést změnu a prodloužit textového pole



    



 if (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "skrytý";



    



 }



  



 }



  



 / / Pokud je maximální výška je dosaženo zobrazovat posuvník



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

Funkce má dva parametry, povinný (ID textového pole, na kterém je použít efekt) a volitelné (libovolné výšce v pixelech).

O jednotlivé kroky slouží k vytvoření funkce Věřím, že existuje jen málo přidat k vyjádření již v kódu.

Použití funkce je velmi jednoduchý: naše textarea onkeyup případě spustí funkci, která nedělá nic, ale znovu kalkulovat pro jednotlivé stisknuté klávesy, pokud je výška je vhodná pro Obsah na:

 



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

 

Pracovní příklad návrhu kód si můžete prohlédnout na této stránce .

Jediným omezením této funkce je neschopnost smlouvy, pokud uživatel smaže text ... V tomto případě textového pole se stále stará snížení velikosti, protože náš kód je určen výhradně pro rozšíření prostoru a ne pro jeho kontrakci. Nicméně, pokud chcete, můžete přidat tuto funkci přidáním několika řádků kódu.