textarea automatische höhe (autorows)

Status
Nicht offen für weitere Antworten.
pasciii

pasciii

Grünschnabel
hallo

ist es irgendwie möglich ein <textarea></textarea> tag mit automatischer höhe zu erzeugen?

Beispiel:

<textarea>Hier kommt mein text hier kommt mein text </textarea>

Nun muss ich ja hier im feld scrollen, wenn ich nicht das attriput rows="3" oder so hinzufüge. nun möchte ich das er mir das feld eifnach genau so hoch macht wie nötig

gibt es da eine lösung?

mfg

pasci
 
wenn dann kannst du mit einem javascript mal versuchen das attribut row zu ändern. irgendwie mit nem

Code: 
onKeyUp="if(irgendwas){Event this.rows='this.rows + 1'}"

Musst natürlich noch irgendwie ermitteln, wann Du die row eins hoch- oder runternehmen musst. Am besten geht das dann wohl in ner funktion zu machen.

Gruss cham
 
So, hab mal ein bisschen getrixt ;). Das Ganze funktioniert unter IE + Mozilla in den aktuellen Versionen (in alten hab ich's nicht getestet). Folgendes muss erfüllt sein, damit es läuft:
- Die Textarea muss in einer Div / Span noriert sein
- Diese Div braucht eine eindeutige ID
- "chars" muss mit der Anzahl der Zeichen pro Zeile vorbelegt werden.
- rows und cols müssen angegeben sein (auch wenn es nur eine row ist), da es sonst einen Fehler zurückliefert.

Code: 
<html>
<head>
    <script type="text/javascript">
    var text;
    var chars=30;
    
    function expand(text){
      with(document.test.area1){
        if(value.length>chars){
          document.getElementById('expandable').innerHTML = '<textarea name="area1" rows="'+(rows+1)+'" cols="30" onKeyDown="expand(this.value)">'+text+'</textarea>';
          document.test.area1.focus();
          chars += cols;
          return true;
        }
        return true;
      }
    }
    </script>
</head>
<body>
<form name="test">
<div id="expandable">
  <textarea name="area1" rows="1" cols="30" onKeyDown="expand(this.value)"></textarea>
</div>
</form>
</body>
</html>

Diese Version ist jetzt nur für zu begin einzeilige Textareas gedacht, lässt sich aber leicht erweitern...


bye
 
Zuletzt bearbeitet:
Du könntest auch einfach versuchen, die Höhe per CSS zu ändern.
Ungefär so:
PHP: 
window.document['oForm']['oTextarea'].style.height = (iLineHeight * iRows) + "px";
 
@Andreas Gaisbauer

Wenn Du die Id des Textareas hast, brauchst du auch kein DIV Tag drumrum. Habs zwar nicht ausprobiert, aber ich kenne das aus anderen Problemstellungen.

einfach dem textarea eine id geben und per getElementByID darauf zugreifen. Im günstigsten Fall kann man das Object per this auch gleich an die Funktion übergeben, also das value erst oben auswerten.

dann auf dem übergebenen obeject die rows ändern und fertig. Falls das nicht geht, einach mit
Code: 
aObject.setAttribute("rows", rows + 1);
das rows attreibut neu setzen.

Der umgekehrte Fall, also wenn die Zeichen weniger werden müsste dann auch noch betrachtet werden. Ich schau mal, ob ich heute abend im Zug nen Sitzplatz hab, dann werd ich es mal machen.

Zuhause wartet leider meine Freundin mit nem fetten Terminplan fürs WE.

So long cham
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück