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á!

Kapcsolódó bejegyzések:

A cikket beküldte: inf3rno ()

2 hozzászólás

  1. Oden says:

    Sziasztok! Sajna csak az eredményt lehet megtalálni itt, nemtudom hogy ez most bugnak számít-e annak?

  2. Harder says:

    Köszi, javítottam.

Szólj hozzá
a Dinamikusan méreteződő textarea c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>