Save multi-line text from 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>

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>?

Answers 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>

Related Articles