jQuery通过载运返回

Question

我一直在做这个项目，但是到目前为止，我还不知道如何继续:我有一个文本区域，用户应该将输入放在其中，并且输入应该直接打印到span中，现在我可以实现这一点，但是当用户输入一些回车(enter)时，span文本只显示一个空格(实际上不是回车返回)。

我做了一把(紧凑型)小提琴，以展示这一刻的感觉。希望有人能帮我。

https://jsfiddle.net/fqnngd44/

$(document).ready(function() {
   $('#input').keyup(function() {
      $('#text').text($(this).val());
   });
});

(换句话说，当按enter键时，我需要textarea打印一个实际的回车返回(而不是一个空格)。

Answer 1

问题在于HTML转换任何一组空格字符(空格、制表符、回车等)。一个单独的空间。

为了解决这个问题，您可以将textarea中的任何新行替换为<br />。还请注意，您需要使用html()而不是text()来显示该值，否则它将被HTML编码。试试这个：

​

jQuery($ => {
  $('#input').keyup(e => {
    $('#text').html($(e.target).val().replace(/\r?\n/g, '<br />'));
  });
});

#text {
  display: table-cell;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Type in to the box, including carriage returns:<br />
<textarea id="input" name="input" type="textarea" maxlength="99"></textarea>
<span id="text"></span>

​

Answer 2

在html中，任何空格序列都折叠成一个空格，回车返回被归类为空白，这样就会发生这种情况。为了避免这种情况发生，您可以使用<pre>标记或使用样式white-space:pre

​

$(document).ready(function() {
    $('#input').keyup(function() {
        $('#text').text($(this).val());
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="input" name="input" type="textarea" maxlength="99"></textarea>
<pre id="text"></pre>

​

Answer 3

可能最简单的方法是用white-space: pre;格式化文本。

演示： https://jsfiddle.net/fqnngd44/10/