テキストエリアの入力が入力されたとおりに表示されない

Question

私はユーザーがテキストを入力するための入力エリアを持っています。ただし、テキストが更新されると、ユーザーが入力すると表示されません。たとえば、新しい行が表示されません。ここで

は、ユーザーが入力した内容です：

そして、ここではそれが更新 後に様子を示している（すべてが1行になります。）：

缶誰かがこれを修正する方法をアドバイスしてください？

Answer 1

新しい行をbrに変換する必要があります。または、pre要素（またはwhite-space: pre * CSSの要素）にテキストを配置できます。

$('textarea').on('keyup',function() { 
 
    var text = $(this).val(); 
 
    $('pre').html(text); 
 
    $('article').html(text); 
 
    $('div').html(text.replace(/(?:\r\n|\r|\n)/g, '<br />')) 
 
})

* {margin:0;padding:0;} 
 
pre { 
 
    border: 1px solid blue; 
 
} 
 
div { 
 
    border: 1px solid red; 
 
} 
 
article { 
 
    border: 1px solid green; 
 
    white-space: pre-line; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea></textarea> 
 

 
<pre></pre> 
 

 
<div></div> 
 

 
<article></article>