從textarea保存多行文本

Question

我有一個包含<textarea>....</textarea>字段的表單。保存文本後，顯示結果的另一種形式，但在一段<p>...</p>

的問題是，它顯示了連接在一起作爲一個線上的所有行

當我去編輯領域，線正確顯示（多線）

如何顯示在<textarea>....</textarea>中輸入的所有行？

Answer 1

您需要<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>

Answer 2

有解決這個problem-

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

希望這有助於！

Answer 3

使用<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>