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