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

本文介绍了从textarea复制到div，保留换行符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有一个 有没有办法从textarea保留换行符（新行），并以某种方式让它们像div / p中的换行符一样工作？ 替换双新行with < / p>< p> ，这是否也可以？这是接近wysiwyg将处理，但不希望为此，这是一个非常小的项目。 $ 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 类似事件： 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，保留换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！