2010-12-23 5 views
2

Mögliche Duplizieren:
Autosizing textarea using prototypeändern Höhe von Textbereich auf der Anzahl der Textzeilen in JavaScript-basierte

Wie kann ich die Höhe eines Textbereichs ändern, basierend auf der Anzahl der Zeilen von Text, den der Benutzer hineinlegt?

Für das folgende Beispiel, wenn der Benutzer den Text in der Textfläche in mehr als eine Textzeile änderte, würde die Textfläche eine Bildlaufleiste auf sich selbst legen, anstatt die Höhe an die Anzahl der Zeilen anzupassen.

<textarea> 
This is the default text that will be displayed in the browser. When you change this text and add more lines to it the browser will not change the height of the textarea that this text is in rather it will add a scroll bar, which is not what I want. 
<textarea> 
+2

@FelixKling Nur wenn wir davon ausgehen, OP verwendet Prototyp, die er nie erwähnt. – Chad

Antwort

1
<textarea onkeyup="autoSize(this);"></textarea> 

function autoSize(ele) 
{ 
    ele.style.height = 'auto'; 
    var newHeight = (ele.scrollHeight > 32 ? ele.scrollHeight : 32); 
    ele.style.height = newHeight.toString() + 'px'; 
} 

"32" Einstellen der Zeilenhöhe anzupassen ist als Übung.

+0

Es funktioniert nicht: http://jsfiddle.net/MYrG2/ –

+0

Problem mit JSFiddle, nicht das Skript. Von Chrome: "Unsicheres JavaScript versucht, mit der URL http://jsfiddle.net/MYrG2/ aus dem Frame mit der URL http://fiddle.jshell.net/MYrG2/show/ auf den Frame zuzugreifen. Domains, Protokolle und Ports müssen übereinstimmen." Cross-Site-Scripting-Fehler, wie merkwürdig. – JURU

+1

Hoppla, ein kleiner Zusatz: um Probleme mit diesem auf Webkit zu beheben, sollte "overflow-y: hidden" zum Textarea Styling hinzugefügt werden. – JURU