Come aggiungere interruzioni di riga a una textarea HTML?


Risposte:


265

Il problema deriva dal fatto che le interruzioni di riga ( \n\r?) Non sono le stesse dei <br/>tag HTML

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

AGGIORNARE

Poiché molti dei commenti e della mia esperienza personale mi hanno mostrato che questa <br> soluzione non funziona come previsto, ecco un esempio di come aggiungere una nuova riga a un textareautilizzo di \ \ r \ n '

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

Ho deciso di fare una modifica, e non una nuova domanda perché questa è una risposta troppo popolare per essere errata o incompleta.


7
Questo funziona anche per me. In jQuery puoi fare qualcosa del genere: $ ('# caption'). Html ($ ('# caption'). Text (). Sostituisci (/ \ n \ r? / G, '<br />')) ;
DavGarcia,

2
L'interruzione di riga Regexp dovrebbe essere /(\r\n|\n|\r)/gm textfixer.com/tutorials/javascript-line-breaks.php
tothemario

3
La regex giusta è /\r\n?|\n/gsenza acquisizione, senza multilinea.
aMarCruz,

5
Il sospetto <br>è sbagliato. Per un'interruzione di linea universale in un'area di testo desiderata \r\n. Ad esempio, il browser UC ignora <br> e \ n nelle aree di testo. Vedi Aggiungere un'interruzione di riga in un'area di testo HTML .
Bob Stein,

2
L'uso di <br> all'interno di un'area di testo non funziona. Almeno non in Chrome, dove ho provato. L'uso di \ n sembra funzionare però. Usa <br> se intendi inserire il testo come html puro, ovvero all'esterno di qualsiasi elemento di input.
Snorvarg,

24

se si utilizza lo script java generale e quindi è necessario assegnare una stringa al valore dell'area di testo

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

è necessario sostituire \no < br >per\\\n

altrimenti dà Uncaught SyntaxError: Unexpected token ILLEGALsu tutti i browser.


18

Forse qualcuno lo trova utile:

Ho avuto problemi con le interruzioni di riga che sono state passate dalla variabile server alla variabile javascript, e quindi javascript le stava scrivendo in textarea (usando i bind di valore knockout.js).

la soluzione è stata la doppia evasione di nuove linee:

orginal.Replace("\r\n", "\\r\\n")

sul lato server, perché con solo caratteri di escape singoli javascript non stava analizzando.


usare "\\ n" funziona per me in Windows e suppongo che funzionerà bene nei sistemi Linux.
Samih,


6

Se si desidera visualizzare il testo all'interno della propria pagina, è possibile utilizzare il <pre>tag.

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});
<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>


3

Una nuova riga è solo uno spazio bianco per il browser e non sarà trattata in modo diverso da uno spazio normale (""). Per ottenere una nuova linea, è necessario inserire <BR />elementi.

Un altro tentativo di risolvere il problema: digitare il testo nell'area di testo e quindi aggiungere un po 'di JavaScript dietro un pulsante per convertire i caratteri invisibili in qualcosa di leggibile e scaricare il risultato in un DIV. Questo ti dirà cosa vuole il tuo browser.


3

Ho una textarea con ID è #infoartist segui:

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

Nel codice javascript, otterrò il valore di textarea e sostituirò l'escaping della nuova riga (\ n \ r) con <br />tag, come:

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

Quindi se stai usando jquery (come me):

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

Spero che ti abbia aiutato. :-)


0

Se devi solo inviare il valore di testarea al server con interruzioni di riga, utilizza nl2br


0

ecco la cosa che ho fatto per lo stesso problema che ho avuto.

quando passo il testo alla pagina successiva in jsp, lo sto leggendo come textarea invece di leggere qualcosa di simile

quindi l'output è arrivato come volevi. e per altre proprietà, è possibile utilizzare come di seguito.

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.