HTML textarea到javascript并保持换行

Question

I am trying to pass a HTML <textarea> through JavaScript, and want to keep the line breaks. Ex when I write:

Line a
Line b

It comes out as:

Line a Line b

My code:

 function textwrite(){ thetext = document.getElementById("text_change").value; document.getElementById("demo").innerHTML = thetext; } 

 <textarea id='text_change' oninput='textwrite()'></textarea> <p id="demo"></p> 

And I don't want to use <pre> tag.

Answer 1

Use white-space :

The white-space CSS property sets how white space inside an element is handled.

with value pre-wrap where

Sequences of white space are preserved. Lines are broken at newline characters, at <br> , and as necessary to fill line boxes.

 function textwrite(){ thetext = document.getElementById("text_change").value; document.getElementById("demo").innerHTML = thetext; } 

 #demo { white-space: pre-wrap; } 

 <textarea id='text_change' oninput='textwrite()'></textarea> <p id="demo"></p> 

Answer 2

Replace \\n , \\r , \\n\\r with </br> in java script:

var myLineBreak = thetext.replace(/\r\n|\r|\n/g,"</br>");

 function textwrite(){ thetext = document.getElementById("text_change").value; var myLineBreak = thetext.replace(/\\r\\n|\\r|\\n/g,"</br>"); document.getElementById("demo").innerHTML = myLineBreak; } 

 <textarea id='text_change' oninput='textwrite()'></textarea> <p id="demo"></p> 

Answer 3

为此，首先将textBox的multiline属性设置为true，然后在每行末尾添加以下内容： "\\r\\n"