从textarea中保存多行文本

I have a form which contains a <textarea>....</textarea> field. after saving the text it shows the result in another form but in paragraph <p>...</p>

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

…

the problem is it shows all lines connected together as one line

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

when I go to edit field, the line are presented correctly (multi-lines)

当我进入编辑字段时，行被正确显示(多行)

how to show all line as entered in <textarea>....</textarea>?

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

3 个解决方案

#1

There are two ways to solve this problem-

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

Using <br> tags

使用< br >标记

You need to convert your new lines to <br> tags while displaying the data in your paragraph <p>. Something on the following lines will help-

在显示段落

中的数据时，需要将新行转换为
标记。以下几行中的内容将会有所帮助
```
var value = $('.textareaClass').val();
$('.paragraphClass').html('<p>'+(value.replace(/\r?\n/g,'<br/>'))+'</p>');
```
Using CSS rules

使用CSS规则

Another simpler way to do this is by using CSS, in which, you simply have to add the rule white-space: pre-wrap to your <p> class. For example, if your paragraph has class text-content then you simply have to do-

另一种更简单的方法是使用CSS，在其中，您只需添加规则空白:预先包装到您的

类。例如，如果你的段落有类文本内容，那么你只需要做-
```
.text-content {
    white-space: pre-wrap;
}
```
DEMO: JSFiddle

演示:JSFiddle

Hope this helps!

希望这可以帮助!

#2

You need to replace newline with <br> to provide new line in html

您需要用
替换换行符，以在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>

Or you need to wrap each string after newline in p tag

或者你需要把每一个字符串都包装在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>

#3

Use <pre> instead of <p> and let it with the same width of the <textarea>. Additional parameters were added to copy the wrap and scroll behaviors aswell:

使用

代替

，让它具有与相同的宽度。还增加了附加的参数来复制包装和滚动行为:</p>

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>

#1