从textarea保存多行文本

Question

我有一个包含<textarea>....</textarea>字段的表单。 保存文本后，它会以另一种形式显示结果，但在段落<p>...</p>

问题是它显示所有连接在一起的线路

当我去编辑字段时，线条正确显示（多行）

如何显示在<textarea>....</textarea>输入的所有行？

Answer 1

有两种方法可以解决这个问题 -

1. 使用<br>标签

   您需要在显示段落<p>的数据时将新行转换为<br>标记。 以下几行有助于 -

    var value = $('.textareaClass').val(); $('.paragraphClass').html('<p>'+(value.replace(/\\r?\\n/g,'<br/>'))+'</p>'); 

2. 使用CSS规则

   另一种更简单的方法是使用CSS，在其中，您只需添加规则white-space: pre-wrap到<p>类。 例如，如果您的段落具有类text-content那么您只需执行以下操作 -

    .text-content { white-space: pre-wrap; } 

   演示： JSFiddle

希望这可以帮助！

Answer 2

您需要用<br>替换换行符以在html中提供新行

 $('#text').on('input', function() { $('#res').html(this.value.replace(/\\r?\\n/g, '<br>')); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <textarea id=text></textarea> <div id=res></div> 

---

或者你需要在p标签中的换行符后包装每个字符串

 $('#text').on('input', function() { $('#res').html('<pr>' + this.value.split(/\\r?\\n/).join('</p><p>') + '</p>'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <textarea id=text></textarea> <div id=res></div> 

Answer 3

使用<pre>代替<p>并使其与<textarea>宽度相同。 添加了其他参数来复制包装和滚动行为以及：

 function test(){ var thetarget = document.getElementById("b"); thetarget.innerHTML = document.getElementById("a").value; thetarget.scrollTop = thetarget.scrollHeight; } 

 body { background: lavender; } textarea, pre { width: 200px; height: 176px; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; float: left; margin-left: 10px; margin-top: 0; overflow-y: auto; } 

 <textarea id=a oninput="test()"></textarea><pre id=b></pre>