Dinamikusan méreteződő textarea

Sziasztok, azt hiszem elég sokan kerestétek már, a megoldást a problémára, most megtaláltuk. Íme a kód:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">
function fitToText()
{
 if (this.scrollHeight>this.clientHeight)
 {
  this.style.height=(this.scrollHeight+20)+"px";
 }
 else
 {
  this.style.height="10px";
  this.style.height=(this.scrollHeight+20)+"px";
 }
}
 
</script>
<textarea id="bid" style="overflow-y: hidden; width: 300px; height: 50px"
 oninput="fitToText.call(this)"
 onpropertychange="if (event.propertyName.toLowerCase()=='value') fitToText.call(this)">
</textarea>

Ezt a kódot egy fórumban írtuk meg közösen nemrég. Lényeg, hogy mozillás böngészők az oninput eseménykezelővel érzékelik ha adat kerül a textarea-ba, internet explorerben viszont ilyen nincsen, így kénytelen voltam az onpropertychange-t használni.Ha a scrollHeight kisebb, mint a clientHeight, akkor a mozillás böngészők a clientHeight értékét adják a scrollHeight-nak, ezért kellett bele a 10pxre állítás, hogy érzékelje a script az igazi scrollHeight értéket. Jó szórakozást hozzá!