jQuery 传递回车

Question

我一直在从事这个项目，但到目前为止，还不知道如何进行:我有一个 textarea 用户应该在其中输入内容，并且该输入应该直接打印到跨度到目前为止，我实际上可以做到这一点，但是当用户输入一些回车符 (enter) 时，span 文本仅显示一个空格(实际上不是回车符)。

我制作了一个(紧凑的) fiddle 来展示此刻的情况。希望有人能帮助我。

https://jsfiddle.net/fqnngd44/

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

(换句话说:我需要 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>