<textarea> 的 jQuery 中项目的 .val() 属性似乎不适用于新行。我需要这个功能，因为文本区域是为了识别回车键并将其显示为预览，并且新行是完整的。
但是，这个小提琴显示了发生的事情：http://jsfiddle.net/GbjTy/1/。显示文本，但不在新行中。
如何实现包含新行的预览，我知道这是可能的，因为它在 Stack Overflow Post Question 预览中做到了这一点。
谢谢。
P.S 我在 SO 上看到了与此相关的其他链接，但他们都说让最终用户使用一些代码，这对我来说不是一个理想的方法。在没有最终用户编写任何特定代码的情况下如何实现这一点，就像在 SO Question Preview 上一样，Enter 在预览中应该可以正常工作。
【问题讨论】：
标签： jquery html textarea newline enter
这是一个 CSS 问题，而不是 JavaScript 问题。默认情况下，HTML 会折叠空白 — 这包括忽略换行符。
将white-space: pre-wrap 添加到输出 div。 http://jsfiddle.net/mattball/5wdzH/
所有现代浏览器都支持此功能：https://caniuse.com/#feat=css3-tabsize
【讨论】：
<div> 更改为 <pre>。
textarea 中的强制换行是\ns，除 textarea 之外的其他 HTML 标记将忽略这些。您必须使用 <br /> 在这些元素处强制换行。
我建议您使用 JavaScript 而不是 CSS 来解决这个问题，因为您已经依赖 JavaScript。
$( "#watched_textarea" ).keyup( function() {
$( "#output_div" ).html( $( this ).val().replace(/\n/g, '<br />') );
});
您可以在此处找到更新版本：http://jsfiddle.net/GbjTy/2/
【讨论】：
试试这样的：
$( "#watched_textarea" ).keyup( function() {
$( "#output_div" ).html( $( this ).val().replace('\n', '<br/>') );
});
在 HTML 中，默认情况下会忽略空格。
您也可以将<div> 标签更改为<pre> 标签：
<pre id="output_div"></pre>
这样也行。
【讨论】：
在这种情况下
您没有在另一个页面中显示 textarea 的 .val()（例如，将表单提交到 Servlet 并转发到另一个 JSP）。
在 Javascript/JQuery 中使用 textarea 的 .val() 作为 URL 编码的一部分（例如，mailto: 正文作为 textarea 内容）
然后，您需要对 textarea 描述进行 URLEncode，如下所示：
var mailText = $('#mailbody').val().replace(/(\r\n|\n|\r)/gm, '%0D%0A');
【讨论】：
$( "#watched_textarea" ).keyup( function() {
$( "#output_div" ).html( $( this ).val().replace(/[\r\n]/g, "<br />") );
});
您需要将换行符替换为<br> 标记以进行 HTML 输出。
这是一个演示：http://jsfiddle.net/GbjTy/3/
【讨论】：
您的换行符输出完美，但 HTML 忽略了换行符：它需要 <br>。
像这样使用一个简单的换行符函数：
function nl2br_js(myString) {
var regX = /\n/gi ;
s = new String(myString);
s = s.replace(regX, "<br /> \n");
return s;
}
$( "#watched_textarea" ).keyup( function() {
$( "#output_div" ).html( nl2br_js($( this ).val()) );
});
jsfiddle 在这里：http://jsfiddle.net/r5KPe/
来自这里的代码：http://bytes.com/topic/javascript/answers/150396-replace-all-newlines-br-tags
【讨论】：
有一个简单的解决方案：用pre标签制作容器。
<textarea id="watched_textarea" rows="10" cols="45">test </textarea>
<pre class="default prettyprint prettyprinted"><code ><span class="pln" id="output_div">fdfdf</span></code></pre>
<script>
$("#watched_textarea").keyup(function() {
$("#output_div").html($(this).val());
});
</script>
【讨论】：
我找到了一个使用 jquery 的更方便的方法。
示例代码
HTML
<textarea></textarea>
<div></div>
<button>Encode</button>
JS
$('button').click(function() {
var encoded = $('<label>').text($('textarea').val()).html();//the label element can be replaced by any element like div, span or else
$('div').html(encoded.replace(/\n/g,'<br/>'))
});
【讨论】：
<?php
//$rsquery[0] is array result from my database query
//$rsquery[0] = 1.1st Procedure \n2.2nd Procedure
//txtRisks is a textarea
//sample1
function nl2br2($string) {
$string = str_replace(array("\r\n", "\r", "\n"), "<br />", $string);
return $string;
}
//sample2
function nl2br2($string) {
$string = str_replace(array("\r\n", "\r", "\n"), "\\n", $string);
return $string;
}
echo "$('#txtRisks').val('".nl2br2($rsquery[0])."')";
?>
【讨论】：
我曾尝试在 laravel Blade 模板中使用 jquery 设置 textarea 值，但由于变量中有新行，因此代码中断了。
我的代码 sn-p 是
$("#textarea_id").val("{{ $php_variable }}");
我通过更改我的代码 sn-p 解决了我的问题，如下所示。
$("#textarea_id").val("{{ str_replace(array('\r', '\n', '\n\n'), '\n', $php_variable }}");
如果你们中的任何人面临这个问题，可能会从中受益。
【讨论】：