18

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

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

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

谢谢。

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

4

10 回答 10

43

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

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

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

于 2011-12-12T21:24:46.513 回答
15

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/

于 2011-12-12T21:25:04.813 回答
3

在这种情况下

  • 您没有在另一个页面中显示 textarea 的 .val() （例如，将表单提交到 Servlet 并转发到另一个 JSP）。

  • 在 Javascript/JQuery 中使用 textarea 的 .val() 作为 URL 编码的一部分（例如 mailto: with body as textarea 内容）

然后，您需要对 textarea 描述进行 URLEncode，如下所示：

var mailText = $('#mailbody').val().replace(/(\r\n|\n|\r)/gm, '%0D%0A');
于 2012-12-18T12:39:06.673 回答
3

尝试这样的事情：

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

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

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

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

这也行得通。

于 2011-12-12T21:25:46.713 回答
2 
$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace(/[\r\n]/g, "<br />") );
});

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

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

于 2011-12-12T21:26:51.110 回答
2

您的换行符输出完美，但 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在这里：http: //jsfiddle.net/r5KPe/

来自这里的代码：http: //bytes.com/topic/javascript/answers/150396-replace-all-newlines-br-tags

于 2011-12-12T21:26:57.607 回答
1

我找到了一种使用 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/>'))
});
于 2018-03-02T06:13:27.527 回答
1

有一个简单的解决方案：使用 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>
于 2016-09-17T05:18:01.867 回答
0 
<?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手册链接

于 2014-01-17T04:36:28.153 回答
0

我曾尝试在 laravel Blade 模板中使用 jquery 设置 textarea 值，但由于变量中有新行，因此代码中断了。

我的代码片段是

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

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

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

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

于 2018-06-20T14:20:07.183 回答