从textarea复制到div，保留换行符 [英] Copy from textarea to div, preserving linebreaks

问题描述

我有一个< textarea> 和一个< div> $ c>< p> 里面）。
在输入区域内的文本时，
有没有办法从textarea保留换行符（新行），并以某种方式让它们像div / p中的换行符一样工作？

替换双新行with < / p>< p> ，这是否也可以？这是接近wysiwyg将处理，但不希望为此，这是一个非常小的项目。

---

< （$ .B
$ b $ $ $ $。box textarea）。keyup（function（） {
var value = $（this）.val（）;
$（'。box p'）.text（value）;
}）;

解决方案

您可以简单地执行此操作：

  $（'。box textarea'）。keyup（function（）{
 var value = $（this）.val（）。替换（/ \ / g，'< br />'）; 
 $（。box p）。html（value）; 
}）; 
  

这将取代所有换行符 \\\
放入 textarea 元素中，并用html < br /> 标记替换它们，以便您可以在< p> 标签元素中保留换行符。

：
$ b

$（'。box textarea'）。keyup （function（）{$（。box p）。html（this.value.replace（/ \\\
/ 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>

$ b

如果您可以更改您的css文件，那么您也可以按照 @Explosion Pills 的建议尝试以下解决方案。即使你仍然必须使用这里的jquery代码来添加 textarea 输入文本到 p 标签上 keyup 类似事件：

data-console =truedata-babel =false>

textarea，p {width：90％; height：80px;} p {border：1px solid #eee;填充：5px; white-space：pre; // <---这是重要的部分}

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

I've got a <textarea> and a <div> (with a <p> inside). When entering text into the area, the <p> gets updated with the content upon keyUp.

Is there a way to preserve linebreaks (new line) from the textarea and somehow get them to work like linebreaks in the div/p?

Replacing double "new line" with </p><p>, is that possible as well? This is close to what a wysiwyg would handle, but don't want that for this, wich is a very small project.

---

This is what I've got so far.

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

解决方案

You can simply do this:

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

This will replace all the line breaks \n in your textarea element and replace them all with html <br/> tag, so that you can preserve the line breaks in your textarea inside <p> tag element also.

Simple Demo Here:

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

If you can make changes to your css files, then you can also try the below solutions as suggested by @Explosion Pills. Even though you will have to still use the jquery code here to add the textarea entered text to p tag on keyup event like:

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

这篇关于从textarea复制到div，保留换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！