我有一个包含<textarea>....</textarea>
字段的表单。保存文本后,它会以另一种形式显示结果,但在段落<p>...</p>
问题是它显示所有连接在一起的线
当我去编辑字段时,线条正确显示(多行)
如何显示<textarea>....</textarea>
中输入的所有行?
答案 0 :(得分:5)
有两种方法可以解决这个问题 -
使用<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
希望这有帮助!
答案 1 :(得分: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>
答案 2 :(得分:1)
使用<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>