怎么做新线？ [textarea - ＆gt; jquery - ＆gt; p标签]

Question

我正在做一些非常类似于stackoverflow问题预览的事情，只是更加基础。

文字区域中的用户类型 - ＆gt; keyup显示他们在预览中输入的内容

新行无效

    $('input, textarea').keyup(function(){        
            var value = $(this).attr('value').replace('\n', '<br />').replace('\r', '<br />');
            $('p.preview').html(value);
    })

Answer 1

你需要这样的东西：

$('input, textarea').keyup(function(){        
   var value = $(this).attr('value').replace(/\n/g,'<br/>').replace(/\r/g,'');
   $('p.preview').html(value);
});

请注意/g，您需要替换第一次出现的次数，而且我们只替换其中一个回报，因此您在textarea中每1次预览中不会得到2行回报/输入。

Answer 2

1. 使用jQuery.val()而不是jQuery.attr()
来获取价值

2. 您可以使用完全符合要求的CSS white-space: pre-line属性：

   $("input, textarea").keyup(function() {
       $("p.preview").html($(this).val());
   });
   
   p.preview {
       white-space: pre-line;
   }