Question

请大家好，我想创建一个像STACKOVERFLOW一样有效的页面当我在textarea中输入时，它会立即显示文本的正确性，我不擅长使用javascript，但我确实想出了这段代码：

$("#comment").keyup(function(){
    if($(this).val() == ""){
       $('#preview').css('display','none');
    }else{
       $('#preview').css('display','block');
    }
    $("#preview").html($(this).val());
    // $("#preview").text($(this).val()); // If you want html code to be escaped
    $("#preview").html($("#preview").html().replace(/`x3`/g,'<div id="code_put" class="code_put">'));
    $("#preview").html($("#preview").html().replace(/`z3`/g,'</div>'));
    var code = document.getElementById('code_put').innerHTML;
    $("#code_put").text(code);
    $("#code_put").html($("#code_put").html().replace(/!--/g,''));
    $("#code_put").html($("#code_put").html().replace(/--/g,''));
});

但是当我按下回车键时它不会分解到预览div中的下一行，因为它在textarea中分解。我想这不是一个更好的方法来实现我的目标。如果有人有更好的方法，我会非常感激。

如果可能的话，我也希望textarea中的编码显示在灰色div中，就像在stackoverflow中一样，因为我在我的代码中添加了类似的东西，但我想这不是一个更好的方法。

这是html代码：

<textarea name="comment" id="comment" class="textarea"></textarea>
<div id="preview" class="preview">
</div>

它并不多，我猜它不相关。

先谢谢

Answer 1

如果我正确了解您的情况，我建议您将#preview <div>变成#preview <pre>，或者添加此css：

#preview {
  white-space: pre;
}

应该在预览<div>中正确显示textarea中的换行符。

以下是小提琴的示例：https://jsfiddle.net/00nmk83y/

Answer 2

您在帖子中提到的具体问题，即不保留换行符，可以通过简单的CSS行修复：

white-space: pre-wrap;

但是，您的代码还有其他问题。最重要的是，您反复分配元素innerHTML（尽管通过jQuery＆＃39; .html()函数）并从中读取。你几乎不应该阅读innerHTML ...

相反，从preview = $(this).val();开始，然后在preview上执行各种替换或解析，最后在最后$("#preview").html(preview);

在提交之前创建textarea预览

2 个答案: