从textarea中保存多行文本

时间:2022-12-04 01:06:14

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-

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

  1. 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>');
    
  2. 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


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-

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

  1. 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>');
    
  2. 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


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>