Textgröße ändern, um allen Inhalt anzupassen

Question

Ich versuche, ein Textarea zu verkleinern, um den Inhalt so eng wie möglich anzupassen. Hier ist meine aktuelle Anstrengung:

function resizeTextarea(t) { 
a = t.value.split('\n'); 
b = 1; 
for (x = 0; x < a.length; x++) { 
    c = a[x].length; 
    if (c >= 75) b += Math.ceiling(c/75); 
    } 
b += a.length; 
t.rows = b; 
} 

Diese ziemlich gut funktioniert, aber es scheint zum Scheitern verurteilt, wenn der Benutzer „schiebt“ Text in der nächsten Zeile durch die Breite füllt. (Hinweis: die hier verwendete 75 ist repräsentativ für die Breite meines Textbereichs in Zeichen)

Es gibt auch einen seltsamen Effekt wo [enter] [key] das Textfeld 2 Zeilen nach dem Ende des Textes, dann das nächste [ Taste] bringt es zurück zu der erwarteten zusätzlichen Zeile. Ich habe versucht, nur c auf 2 setzen, wenn c < = 1, ohne Wirkung. Dieses ist keine große Sache, aber es wäre schön, es zu korrigieren.

Jede Hilfe wäre willkommen.

Hinweis: Diese Funktion wird bei Tastendruck aufgerufen.

Answer 1

Ihr Code schlägt fehl, weil es keine Methode wie Math.ceiling() gibt, stattdessen heißt es Math.ceil().

Daneben ...

Alle Variablen in Ihrer Funktion sind global. Dies ist keine gute Vorgehensweise - Sie sollten immer das Schlüsselwort var zu Ihren Variablendeklarationen hinzufügen, um die Variable für diese Funktion privat zu machen - andernfalls könnten Sie versehentlich eine globale Variable ändern und verursachen, dass wirklich schlimme Dinge passieren. Verwenden Sie JSLint, um Ihren Code auf solche Probleme zu überprüfen.

Es ist auch nicht gut, die Breite des Textbereichs fest in Ihre Funktion zu codieren. Auf diese Weise können Sie Ihre Größenänderungsfunktion nicht für andere Textbereiche verwenden, die eine andere Breite haben können. Im aktuellen Fall ist es wahrscheinlich am besten, die Breite dynamisch aus dem cols Attribut von Textarea zu lesen.

Umbenennen Sie Ihre Variablen zu etwas Sinnvoller als a, b, c würde auch die Lesbarkeit sehr viel verbessern.

Zum Beispiel:

 
function resizeTextarea(textarea) { 
    var lines = textarea.value.split('\n'); 
    var width = textarea.cols; 
    var height = 1; 
    for (var i = 0; i < lines.length; i++) { 
    var linelength = lines[i].length; 
    if (linelength >= width) { 
     height += Math.ceil(linelength/width); 
    } 
    } 
    height += lines.length; 
    textarea.rows = height; 
} 

Ich schlage vor, Sie auch die Antworten studieren für SO Autosizing Textarea veröffentlichen, wies von Triptychon aus.