HTML textarea ignora il carattere della prima riga, perché?

Question

Potrebbe spiegare perché questo:

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

rende una textarea con una nuova linea in basso, ma NO nuova linea in alto?

Testato IE8, FF11, Safari 5.1, Chrome 24

E non è un problema di JS, anche quando si scrive codice HTML in pagina si ottiene lo stesso risultato, cioè

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

Manca ancora la prima nuova riga !!!

ho bisogno di aggiungere un'altra nuova riga in alto per mostrare uno:

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

Answer 1

Aggiungi uno spazio bianco prima della prima "\ n" come questo:

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

o

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

altrimenti non funzionerà.

---

Aggiornamento: più avanti nel lato server, è possibile rimuovere il primo spazio vuoto facendo

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

o

$str2 = substr($str, 4); 

se è PHP.

Answer 2

Quando si scrive all'interno di XHTML si utilizzano entità appropriate.

Se un nodo di testo inizia con uno spazio bianco (spazio, nuova riga) verrà ignorato dai parser HTML. La codifica della nuova riga in un'entità HTML corretta obbliga il parser a riconoscerlo.


 == carriage return 

Answer 3

Se possibile, modificare il codice per avere la textarea pre-definita come HTML, quindi scrivere la stringa come questo, invece:

HTML:

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

Script:

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

Questo dovrebbe preservare lo spazio bianco.Opzionalmente è possibile aggiungere una regola CSS:

textarea { 
    white-space:pre; 
    } 

un violino con cui giocare:
http://jsfiddle.net/RFLwH/1/

Aggiornamento:

OP testato in IE8, che questo non funziona - è sembra essere una limitazione/bug con questo browser. IE8 utilizza effettivamente CR + LF se si inserisce manualmente un line-feed nella parte superiore, ma quando viene impostato a livello di programmazione questo viene completamente ignorato dal browser.

Aggiungere questo al html di fare un test:

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

potete vedere la stringa restituita è:

%0D%0Ahello%20babe%20 

significa che il CR + LF è lì (le altre line-feed sono convertito in spazi - ma l'inserimento di uno spazio all'inizio non aiuta neanche). Immagino che non ci sia nulla che tu possa fare riguardo a questo comportamento; il browser è obsoleto (ma purtroppo ancora ampiamente utilizzato, quindi questo può essere un problema per quegli utenti se questo è essenziale).

Answer 4

Infine ho finito con questa soluzione sul lato server:

per raddoppiare leader (solo la prima!) Simbolo nl prima uscita in textarea:

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

dovrebbe essere un \n\r in alto: document.write("<textarea cols='10' rows='10'>" + "\n\rhello\nbabe\n" + "</textarea>");

jsbin