textarea 的 .val() 不考虑换行

Posted 2023-05-07

【中文标题】textarea 的 .val() 不考虑换行

【英文标题】：The .val() of a textarea doesn't take new lines into account

【发布时间】：2012-01-18 20:13:55

【问题描述】：

<textarea> 的 jQuery 中项目的 .val() 属性似乎不适用于新行。我需要这个功能，因为文本区域是为了识别回车键并将其显示为预览，并且新行是完整的。

但是，这个小提琴显示了发生的事情：http://jsfiddle.net/GbjTy/1/。显示文本，但不在新行中。

如何实现包含新行的预览，我知道这是可能的，因为它在 Stack Overflow Post Question 预览中做到了这一点。

谢谢。

P.S 我在 SO 上看到了与此相关的其他链接，但他们都说让最终用户使用一些代码，这对我来说不是一个理想的方法。在没有最终用户编写任何特定代码的情况下如何实现这一点，就像在 SO Question Preview 上一样，Enter 在预览中应该可以正常工作。

【参考方案1】：

这是一个 CSS 问题，而不是 javascript 问题。默认情况下，html 会折叠空白 — 这包括忽略换行符。

将white-space: pre-wrap 添加到输出 div。 http://jsfiddle.net/mattball/5wdzH/

所有现代浏览器都支持此功能：https://caniuse.com/#feat=css3-tabsize

【讨论】：

如果您不想使用 CSS，也可以将 <div> 更改为 <pre>。

【参考方案2】：

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/

【参考方案3】：

试试这样的：

$( "#watched_textarea" ).keyup( function() 
   $( "#output_div" ).html( $( this ).val().replace('\n', '<br/>') );
); 

在 HTML 中，默认情况下会忽略空格。

您也可以将<div> 标签更改为<pre> 标签：

<pre id="output_div"></pre>

这样也行。

【参考方案4】：

在这种情况下

您没有在另一个页面中显示 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');

【讨论】：

谢谢，它帮助我解决了一个长期悬而未决的问题。

【参考方案5】：

$( "#watched_textarea" ).keyup( function() 
   $( "#output_div" ).html( $( this ).val().replace(/[\r\n]/g, "<br />") );
);

您需要将换行符替换为<br> 标记以进行 HTML 输出。

这是一个演示：http://jsfiddle.net/GbjTy/3/

【参考方案6】：

您的换行符输出完美，但 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

【参考方案7】：

有一个简单的解决方案：用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>

【参考方案8】：

我找到了一个使用 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/>'))
);

【参考方案9】：

<?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])."')";

?> 

PHP Manual link

【讨论】：

OP 从未提及 PHP

【参考方案10】：

我曾尝试在 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 ");

如果你们中的任何人面临这个问题，可能会从中受益。