Venyttely lisää sisällöstä textarea

Web on ehtymätön tarjonta mineraali vinkkejä ja ideoita. Internet on määritelmän mukaan ympäristö, jossa jokainen päivä contuna testata uusia ideoita syntyy, jotkut muut nero, yksinkertaisesti utelias ja mielenkiintoinen.

Vuodesta näkökulmasta web design, yksi "erikoistehosteet", että mieluummin on dynaaminen hallinta koon suuri tekstin sisältö muuttuu tuli käyttäjä. Pähkinänkuoressa: enemmän sisältöä kirjoitat ja enemmän tulee textarea. Vuodesta psykologisesta näkökulmasta se on kehotuksen jatkaa kirjoittamaan vastaa sanomalla "Hei haluat kirjoittaa myös, ei ole tilaa."

Tässä artikkelissa ehdotan yksinkertaista JavaScript-toiminto hoitaa tämän mukava vaikutus. Toiminto Kyseessä ei tee muuta kuin pitkittää textarea kun sisältö ylittää sen luonnollista kapasiteettia (välttäminen, itse asiassa, ulkonäkö alakuloisuus pystyviiva). Koodi on tässä:

 moreWords toiminto (id, maxheight) {



  



 / / Luo muuttuja käyttää tyylin ominaisuuksiin textarea



  



 id: document.getElementById (id);



  

  



 / / Jos en voi mennä ulos tekemättä mitään



  



 if (! txtarea) return;



  

  



 / / Luo muuttuja, joka aluksi ellei nykyinen korkeus textarea



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Jos korkeus ei ole asetettu tai tämä on suurempi kuin nykyinen ...



  



 if (! maxheight | | maxheight> newHeight) {



    

    



 / / Määrittele arvo tunnistaa newHeight suurempi korkeus sisältö (scrollHeight) ja sen arvo



    



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



    

    



 / / Jos korkeus on asetettu ..



    



 if (maxheight)



      



 / / Määrittele arvo newHeight tunnistaa pienempi maksimikorkeus (maxheight) ja sen arvo



      



 newHeight = Math.min (maxheight, newHeight);





    



 / / Jos laskettu korkeus (newHeight) on suurempi kuin nykyinen textarea



    



 / / Tee muutos ja pidentää textarea



    



 if (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "piilotettu";



    



 }



  



 }



  



 / / Jos maksimi korkeus on saavutettu Näytä vierityspalkki



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

Toiminto kestää kaksi parametria, pakollinen (textarea tunnus, johon sovelletaan vaikutus) ja valinnainen (kaikki korkeus pikseleinä).

Tietoa eri vaiheet käytetään luomaan toiminnon Mielestäni on vähän lisättävää kommentit jo koodia.

Käyttö toiminto on hyvin yksinkertainen: meidän textarea onkeyup tapahtuma näkyvä toiminto ei tee muuta kuin laskemaan uudelleen jokaisen näppäintä painettuna, jos korkeus on sopiva sisältö Kirjoitettu:

 



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

 

Toimiva esimerkki ehdotetun koodi luettavissa osoitteessa tällä sivulla .

Ainoa raja tämä toiminto on kyvyttömyys sopimus, jos käyttäjä poistaa tekstin ... Tällöin textarea on edelleen vanha pienentäminen, koska meidän koodi on suunniteltu yksinomaan laajentamiseen tilaa eikä sen supistuminen. Jos kuitenkin haluat, voit lisätä tämän ominaisuuden lisäämällä muutaman rivin koodia.