16

我有一个<textarea>和一个<div>（有一个<p>内部）。在区域中输入文本时，<p>会在 keyUp 时使用内容更新。

有没有办法从 textarea 中保留换行符（新行）并以某种方式让它们像 div/p 中的换行符一样工作？

用 ,替换双“新行”</p><p>也可以吗？这接近所见即所得的处理方式，但不希望这样做，这是一个非常小的项目。

这就是我到目前为止所得到的。

$(".box textarea").keyup(function () {
  var value = $(this).val();  
  $('.box p').text(value);
});
4

4 回答 4

40

您可能想要添加 CSS 规则white-space: pre或添加white-space: pre-wrap到.box p. 这将按原样显示空白。

于 2013-04-23T09:10:00.767 回答
16

你可以简单地这样做：

$('.box textarea').keyup(function() {
    var value = $(this).val().replace(/\n/g, '<br/>');
    $(".box p").html(value);
});

\n这将替换元素中的所有换行符textarea并将它们全部替换为 html标签，这样您也可以在标签元素<br/>内的 textarea 中保留换行符。<p>

简单的演示在这里：

$('.box textarea').keyup(function() {
  $(".box p").html(this.value.replace(/\n/g, '<br/>'));
});
textarea,p {
  width: 90%;
  height: 80px;
}
p {
  border: 1px solid #eee;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <textarea></textarea>
  <br/>
  <p></p>
</div>

如果您可以更改您的 css 文件，那么您也可以按照@Explosion Pills的建议尝试以下解决方案。即使您仍然必须在此处使用 jquery 代码将textarea输入的文本添加p到事件标记，keyup例如：

$('.box textarea').keyup(function() {
  $(".box p").html(this.value);  // replace is not needed here
});
textarea,p {
  width: 90%;
  height: 80px;
}
p {
  border: 1px solid #eee;
  padding: 5px;
  white-space: pre; // <--- This is the important part
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <textarea></textarea>
  <br/>
  <p></p>
</div>

于 2013-04-23T09:08:38.713 回答
2

这是最简单和最安全的纯 jQuery 解决方案：

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $('.box p').text(value).css('white-space', 'pre-wrap');
});

当然，如果你可以添加.box p { white-space: pre-wrap }到你的静态 CSS 样式中，那么你不需要用 jQuery 注入它。

（另请注意，这white-space: pre-wrap也会导致多个连续的空格被保留，而不是折叠成一个空格。如果您不希望这样，但仍想保留换行符，请white-space: pre-line改用。）

附言。您永远不应该将未转义的用户输入传递给.html()（例如当前接受的答案），因为如果输入包含任何 HTML 元字符（如&or ），这样做会导致输出错误<，并且还可以打开您的 HTML 注入和跨站点脚本（XSS ) 攻击，如果输入可能受到恶意攻击者的影响。

如果您绝对坚持不white-space以任何形式使用 CSS 属性，则需要先转义输入中的任何 HTML 元字符，然后再将<br>标签添加到其中。可能最简单和最安全的方法是让浏览器为您处理转义，例如：

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $('.box div.output').text(value).html(function (index, html) {
    return '<p>' + html.replace(/[^\S\n]+\n/g, '\n').replace(/\n\n+/g, '</p><p>').replace(/\n/g, '<br>') + '</p>';
  });
});

这将首先使用将输入文本复制到目标元素中.text()（自动对其进行 HTML 转义），然后修改生成的 HTML 代码以从行中删除尾随空格，将多个连续换行符折叠成段落分隔符，最后将单个换行符替换为<br>标签。

（注意，为了在输出中允许多个段落，目标元素实际上应该是 a <div>，而不是<p>元素。将一个元素嵌套<p>在另一个元素中是无效的 HTML，并且可能不会在不同的浏览器上产生一致的结果。）

于 2016-11-04T16:11:26.037 回答
-2

用于string.replace("\n", "<br/>")将文本区域中的任何换行符替换为页面中的新行。

JavaScript：

<script type="text/javascript">
function ta()
{
taValue = document.getElementById("ta").value;
taValue = taValue.replace("\n", "<br/>");
document.getElementById("tatext").innerHTML = taValue;
}
</script>

HTML：

<textarea id="ta" onkeyup="ta()"></textarea>
<div id="tatext"></div>
于 2013-04-23T09:11:39.710 回答