添加换行符并显示来自文本区域的输入

Question

我有一个文本在一个表格中。我用了这段代码

 $('textarea').keypress(function (event) {
        if (event.which == 13) {
            event.preventDefault();
            var s = $(this).val();
            $(this).val(s + "<br />");
        }
    });

允许用户使用回车键进入下一行。 我尝试同时使用
和 \n 在表单中，用户可以转到新行。但是，当输入显示在页面上时，不会显示新行，并且不会出现新行之后的任何文本。但是，它仍然存在 - 如果您去编辑表单，它仍然会显示您单击 Enter 后键入的文本。我加了

white-space: pre-wrap;

在我的 css 文件中的文本框的 css 中尝试解决问题。但是，它仍然没有工作。有关如何解决此问题的任何建议/意见？

Answer 1

您不想在他们键入时插入<br/> 标记。您真的不想在他们键入时对他们的文本做任何事情。如果您想保留它们的换行符，可以在将它们注入元素之前将它们转换为<br/> 标签。

$('#text').keyup(function(event) {
  var text = $("#text").val();
  text = text.replace(/(?:\r\n|\r|\n)/g, '<br />');
  $("#result").html(text);
});

textarea {
  min-width: 200px;
  min-height: 200px;
  float: left;
}

#result {
  float: left;
  border: 1px solid red;
  padding: 10px;
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text" placeholder="Type in here"></textarea>
<div id="result"></div>