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
4
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 classtext-content
then you simply have to do-另一种更简单的方法是使用CSS,在其中,您只需添加规则空白:预先包装到您的
类。例如,如果你的段落有类文本内容,那么你只需要做-
.text-content { white-space: pre-wrap; }
DEMO: JSFiddle
演示:JSFiddle
Hope this helps!
希望这可以帮助!
#2
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
1
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:
使用
代替,让它具有与
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
4
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 classtext-content
then you simply have to do-另一种更简单的方法是使用CSS,在其中,您只需添加规则空白:预先包装到您的
类。例如,如果你的段落有类文本内容,那么你只需要做-
.text-content { white-space: pre-wrap; }
DEMO: JSFiddle
演示:JSFiddle
Hope this helps!
希望这可以帮助!
#2
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
1
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:
使用
代替,让它具有与
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>