textarea的.val()不考虑新行

Question

.val()jQuery中a项的属性<textarea>似乎不适用于新行.我需要这个功能,因为文本区域是为了识别输入键并将其显示为预览,新线条完整.

但是,这个小提琴会显示出什么:http://jsfiddle.net/GbjTy/1/.将显示文本,但不会显示新行.

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

谢谢.

PS我在SO上看到了与此相关的其他链接,但是他们都说让最终用户使用一些代码,这对我来说不是一个理想的方法.如果没有最终用户编写任何特定代码,我怎么能实现这一点,例如SO问题预览,其中Enter在预览中应该正常工作.

Answer 1

这是一个CSS问题,而不是JavaScript问题.默认情况下,HTML会折叠空白区域 - 这包括忽略换行符.

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

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

Answer 2

textareas中\n的强制换行是s,其他HTML标签比textarea会忽略这些.您必须使用<br />强制这些元素的新行.

我建议您使用JavaScript来修复它而不是CSS,因为您已经依赖JavaScript.

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

你可以在这里找到更新版本:http://jsfiddle.net/GbjTy/2/