从textarea复制到div,保留换行符

Question

我有一个<textarea>和一个<div>(有一个<p>内部).在区域中输入文本时,<p>会在keyUp上更新内容.

有没有办法保留textarea的换行符(新行),并以某种方式使它们像div/p中的换行符一样工作？

替换双"新线" </p><p>,是否也可以？这接近于所见即所得,但不希望这样,这是一个非常小的项目.

---

这是我到目前为止所得到的.

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

Answer 1

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

Answer 2

你可以这样做:

$('.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>