Question

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

中

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

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

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

Answer 1

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

使用<br>代码

您需要在显示段落<br>中的数据时将新行转换为<p>代码。以下几行中的内容将有所帮助 -
```
var value = $('.textareaClass').val();
$('.paragraphClass').html('<p>'+(value.replace(/\r?\n/g,'<br/>'))+'</p>');
```
使用CSS规则

另一种更简单的方法是使用CSS，您只需将规则white-space: pre-wrap添加到<p>类。例如，如果您的段落具有类text-content，则只需执行 -
```
.text-content {
    white-space: pre-wrap;
}
```
DEMO：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>

从textarea

3 个答案: