HTML-Textbereich ignoriert den ersten Zeilenumbruch, warum?

Question

Können Sie sich erklären, warum dies:

<script type="text/javascript"> 
    document.write("<textarea cols='10' rows='10'>" + "\nhello\nbabe\n" + "</textarea>"); 
</script> 

am unteren Rande ein Textfeld mit einer neuen Linie machen, aber NO neue Linie am oberen?

Getestet IE8, FF11, Safari 5.1, Chrome 24

Und es ist kein JS Problem, auch wenn Sie HTML-Code in Seite schreiben Sie das gleiche Ergebnis zu erhalten, dh

<textarea cols='10' rows='10'> 
hello 
babe 
</textarea> 

Die erste neue Zeile fehlt noch !!!

Ich brauche wieder eine neue Linie oben zu geben, um zu zeigen:

document.write("<textarea cols='10' rows='10'>" + "\n\nhello\nbabe\n" + "</textarea>"); 

Answer 1

hinzufügen Leerzeichen vor dem ersten „\ n“ wie folgt aus:

<script type="text/javascript"> 
    document.write("<textarea cols='10' rows='10'>" + " \nhello\nbabe\n" + "</textarea>"); 
</script> 

oder

<textarea cols='10' rows='10'> <!-- whitespace here --> 
hello 
babe 
</textarea> 

andernfalls wird es nicht funktionieren.

---

Update: Später in der Server-Seite können Sie das erste Leerzeichen entfernen, indem

tun

$str = ltrim ($str,' '); 

oder

$str2 = substr($str, 4); 

wenn es PHP ist.

Answer 2

Wenn Sie innerhalb von XHTML schreiben, verwenden Sie geeignete Entities.

Wenn ein Textknoten mit Leerzeichen (Leerzeichen, neue Zeile) beginnt, wird er von HTML-Parsern ignoriert. Das Codieren der neuen Zeile in eine richtige HTML-Entität zwingt den Parser, dies zu bestätigen.


 == carriage return 

Answer 3

Wenn möglich, Ihren Code ändert den Textbereich vordefiniert als html zu haben, dann wie diese Stelle die Zeichenfolge schreiben:

HTML:

<textarea cols='10' rows='10' id='test'></textarea> 

Script:

document.getElementById('test').innerHTML = '\nhello\nbabe\n'; 

Das sollte Leerraum erhalten.Optional können Sie eine CSS-Regel hinzufügen:

textarea { 
    white-space:pre; 
    } 

Eine Geige spielen:
http://jsfiddle.net/RFLwH/1/

Update:

OP in IE8 getestet, die dies nicht funktioniert - es erscheint eine Einschränkung zu sein/Bug mit diesem Browser. IE8 verwendet tatsächlich CR + LF, wenn Sie oben manuell einen Zeilenvorschub einfügen, aber wenn dies programmgesteuert eingestellt ist, wird dies vom Browser vollständig ignoriert.

Fügen Sie diese auf den HTML-Code, einen Test zu tun:

<span onclick="this.innerHTML = escape(document.getElementById('test').innerHTML);"> 
    Get textarea content 
</span> 

Sie die Zeichenfolge zurückgegeben sehen kann, ist:

%0D%0Ahello%20babe%20 

die CR + LF Bedeutung ist es (die anderen Line-Feeds sind in Leerzeichen konvertiert - aber das Einfügen eines Leerzeichens am Anfang hilft auch nicht. Ich denke, du kannst nichts gegen dieses Verhalten tun; der Browser ist veraltet (aber leider immer noch weit verbreitet, so dass dies ein Problem für diese Benutzer sein kann, wenn dies notwendig ist).

Answer 4

Schließlich beenden ich mit dieser serverseitige Lösung:

(nur erster!) Zu verdoppeln führenden nl Symbol, bevor es in TextArea- Ausgabe:

if(str_startswith("\r\n",$value)) 
{ 
    $value = "\r\n".$value;    
}elseif(str_startswith("\n",$value)) 
{ 
    $value = "\n".$value; 
}elseif(str_startswith("\r",$value)) 
{ 
    $value = "\r".$value; 
} 

function str_startswith($start, $string) 
{ 
    if(mb_strlen($start)>mb_strlen($string)) 
    return FALSE; 
    return (mb_substr($string, 0,mb_strlen($start))==$start); 
} 

Answer 5

Es soll ein \n\r an der Spitze sein: document.write("<textarea cols='10' rows='10'>" + "\n\rhello\nbabe\n" + "</textarea>");

jsbin