Question

我一直在研究这个项目，但到目前为止，还无法弄清楚如何继续：我有一个 textarea ，用户应该输入输入，输入应该是直接打印到 span 到现在为止我实际上可以实现这一点，但是当用户输入一些回车符（回车）时， span 文本只显示一个空格（实际上不是回车符）。

我已经制作了一个（紧凑的）小提琴来展示它此刻的感受。希望有人可以帮助我。

https://jsfiddle.net/fqnngd44/

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

（换句话说：当按下回车键时，我需要 textarea 来打印实际的回车符（而不仅仅是空格）。）

Answer 1

问题是因为HTML将任何一组空白字符（空格，制表符，回车符等）转换为单个空格。要解决此问题，您可以使用<br />替换textarea中的任何新行。另请注意，您需要使用html()的{{1}} instea来显示该值，否则将进行HTML编码。试试这个：

text()

Working example

Answer 2

在jQuery documentation for .val()中，它有以下警告（和建议）

注意：目前，在textarea元素上使用.val（）会从浏览器报告的值中删除回车符。但是，当通过XHR将此值发送到服务器时，将保留回车符（或由不包含原始值的浏览器添加回车符）。可以使用valHook实现此问题的解决方法，如下所示：

$.valHooks.textarea = {
  get: function( elem ) {
    return elem.value.replace( /\r?\n/g, "\r\n" );
  }
};

Answer 3

在html中，任何白色空间序列都会折叠到一个空格，回车被归类为空白区域。为此，您可以使用<pre>代码或使用样式white-space:pre

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

jQuery传递回车

4 个答案: