Lesen Sie neue Zeilen in Textarea VOR dem Einreichen des Formulars?

Question

Ich habe eine TextArea mit Attribut wrap = "hard", was bedeutet, dass ich in der Lage sein sollte, den Zeilenumbruch (neue Zeilen) nach dem Senden an den Server zu bekommen - das funktioniert. Aber was ich tun möchte, ist die neuen Zeilen, die vor Vorlage erstellt werden.

Warum? Weil ich die Zeilen zählen möchte, die gerade sichtbar sind. Und jetzt spreche ich nicht über Wagenrücklaufzeilen. Ich spreche über Zeilen, die durch Begrenzung der Breite (oder Einstellung des cols-Attributs) des Textfelds erstellt werden.

Ich habe diese Textbox:

<textarea id="myarea" name="myarea" cols="35" rows="10" wrap="hard"> 
    Some example text here. Hello my name is something I should be able to blabla. 
</textarea> 

Ausgabe im Browser:
Einige Beispieltext hier. Hallo mein Name ist
etwas sollte ich in der Lage sein, blabla.

rows = 2

ich versucht habe:..
$ ('# MyArea') html() split ("\ n") Länge
$ ('# MyArea'). .val(). split ("< br> "). Länge
$ ('# MyArea'). val(). split (" \ r"). Länge
Und ein paar mehr Kombinationen ...

Aber keiner funktioniert. Ist das, was ich möchte, sogar möglich, ohne ein Skript zu schreiben, das jedes Zeichen zählt und dann eine neue Zeile erstellt? Ich hatte gehofft, dass dies "automatisch" passieren würde ...

Wenn das nicht möglich ist, warum kann der Server die neuen Zeilen interpretieren (finden), während ich nicht kann?

Danke!

Answer 1

Scheint, wie es keine Build-Tools ist es, diesen Wert zu erhalten. Aber wir können es berechnen. Angenommen, die Zeilenhöhe in textarea ist ein bekannter Wert (Sie können ihn explizit in css definieren). So ist der Code die Anzahl der Zeilen berechnen würde dies mag:

var area = $('#myarea').get(0); 

    //save the initial height of textarea 
    var initialHeight = area.style.height; 

    //set the height to 0 so scrollHeight will always return dynamic height 
    area.style.height = '0px'; 

    //here we assume that the line-height equals to 15 
    var numberOfRows = Math.floor(area.scrollHeight/15); 

    //restore textarea height 
    area.style.height = initialHeight; 

    console.log(numberOfRows); 

Arbeitsbeispiel http://jsfiddle.net/J5UpF/

UPDATE

einfach den Fehler in Chrome heraus mit meinem Code. Ich habe die Bildlaufleiste, die auf der rechten Seite von Textfeld angezeigt wird, nicht berücksichtigt. Das führt zu der falschen Anzahl von Zeilen, die manchmal berechnet werden. Es funktioniert jedoch wie ein Charme in Firefox.So beheben Sie dieses Problem müssen wir die Differenz von Scrollbalken Breite berechnen und die Breite des Textbereich entsprechend anpassen:

var area = $('#myarea').get(0); 
var $area = $('#myarea'); 

//save the initial height of textarea 
var initialHeight = area.style.height; 

var scrollbarWidthInitial = area.offsetWidth - area.clientWidth; 

//set the height to 0 so scrollHeight will always return dynamic height 
area.style.height = '0px'; 

var scrollbarWidth = area.offsetWidth - area.clientWidth; 
var scrollbarWidthDiff = scrollbarWidth - scrollbarWidthInitial; 
$area.width($area.width() + scrollbarWidthDiff); 

//here we assume that the line-height equals to 15 
var numberOfRows = Math.floor(area.scrollHeight/15); 

//restore textarea height 
area.style.height = initialHeight; 
$area.width($area.width() - scrollbarWidthDiff); 

console.log(numberOfRows); 

aktualisiert Beispiel http://jsfiddle.net/J5UpF/3/

UPDATE 2

Ein neuer ehrfürchtige Fehler in Chrome entdeckt! Bei Verwendung des Attributs placeholder berechnet Chrome die Anzahl der Zeilen für den Platzhaltertext. Die Problemumgehung ist einfach: Sichern Sie einfach das Platzhalterattribut, wenn Sie einige Daten in das Textfeld eingegeben haben, und stellen Sie es nach dem Löschen der Daten wieder her.

Aktualisiert Beispiel http://jsfiddle.net/J5UpF/4/

Answer 2

Sie könnten jquery binden auf die Schaltfläche onClick einreichen, dann mit

$('#myarea').val().split("\n").length