textarea中的输入不会显示为输入

Question

我有一个输入区，供用户输入一些文字。但是，当文本更新时，它不会显示为用户输入的内容。例如，新行未显示。

以下是用户输入的内容：

以下是更新后的显示方式 （一切都进入一行。）：

有人可以建议如何解决这个问题吗？

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>