Question

我正在尝试通过JavaScript传递HTML <textarea>，并希望保留换行符。例如，我写的时候：

Line a
Line b

结果为：

Line a Line b

我的代码：

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

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

我也不想使用<pre>标签。

Answer 1

使用white-space：

white-space CSS属性设置如何处理元素内的空白。

值为pre-wrap，其中

保留空白序列。行在<br>处以换行符断开，并根据需要填充行框。

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

在Java脚本中用\n替换\r，\n\r，</br>：

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"

HTML textarea到javascript并保持换行

3 个答案: