从textarea

时间:2016-03-25 07:07:35

标签: jquery html5 css3

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

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

当我去编辑字段时,线条正确显示(多行)

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

3 个答案:

答案 0 :(得分:5)

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

  1. 使用<br>代码

    您需要在显示段落<br>中的数据时将新行转换为<p>代码。以下几行中的内容将有所帮助 -

    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;
    }
    

    DEMO:JSFiddle

  3. 希望这有帮助!

答案 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>