Question

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

但是，这个小提琴会显示出什么：http://jsfiddle.net/GbjTy/1/。显示文本，但不是新行。

如何实现预览以包含新行，我知道这是可能的，因为它在Stack Overflow Post Question预览中执行此操作。

感谢。

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

Answer 1

这是一个CSS问题，而不是JavaScript问题。默认情况下，HTML会折叠空格 - 这包括忽略换行符。

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

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

Answer 2

textareas中的强制换行是\n s，其他HTML标签比textarea会忽略这些。您必须使用<br />强制在这些元素上添加新行。

我建议您使用JavaScript来修复它而不是CSS，因为您已经依赖JavaScript了。

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

您可以在此处找到更新版本：http://jsfiddle.net/GbjTy/2/

Answer 3

尝试这样的事情：

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

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

您还可以将<div>代码更改为<pre>代码：

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

这也可以。

Answer 4

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

您需要将新行字符替换为HTML输出的<br>标记。

以下是演示：http://jsfiddle.net/GbjTy/3/

Answer 5

您的换行符输出完美，但HTML忽略换行符：它需要<br>。

使用简单的newline-to-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 here：http://jsfiddle.net/r5KPe/

此处的代码：http://bytes.com/topic/javascript/answers/150396-replace-all-newlines-br-tags

Answer 6

在

的情况下

您没有在另一个页面中显示textarea的.val（）（例如，将表单提交给Servlet并转发到另一个JSP）。
在Javascript / JQuery中使用textarea的.val（）作为URL编码的一部分（例如，mailto：with body as textarea contents）

然后，你需要URLEncode textarea描述如下：

var mailText = $('#mailbody').val().replace(/(\r\n|\n|\r)/gm, '%0D%0A');

Answer 7

有一个简单的解决方案：使用预标签制作容器。

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

Answer 8

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

Answer 9

我找到了一个使用jquery的更方便的方法。

<强> samplecode

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/>'))
});

Answer 10

我曾尝试在laravel刀片模板中使用jquery设置textarea值，但是代码中断了，因为该变量中包含新行。

我的代码段是

$("#textarea_id").val("{{ $php_variable }}");

我通过更改如下代码段解决了我的问题。

$("#textarea_id").val("{{ str_replace(array('\r', '\n', '\n\n'), '\n', $php_variable }}");

如果您遇到任何此问题，可能会从中受益。

textarea的.val（）不考虑新行

10 个答案: