在提交之前创建文本区域预览

Creating a textarea preview before submission

本文关键字：区域 文本 创建 提交      更新时间：2023-09-26

拜托伙计们，我想创建一个像STACKOVERFLOW一样工作的页面立即显示文本，就像在文本区域中键入时编写文本一样，我不擅长 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,''));
});

但是当我按 Enter 键时，它不会分解到预览div 中的下一行，因为它在文本区域中分解。我想这不是实现我的目标的更好方法。如果有人对此有更好的方法，我将不胜感激。

如果可能的话，我还希望文本区域中的编码也像在堆栈溢出中一样显示在灰色div 中，因为我在我的代码中添加了类似的东西，但我想这不是更好的方法。

这是 HTML 代码：

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

不多，我想它无关紧要。

提前致谢

你在帖子中提到的具体问题，即不保留换行符，可以用简单的 CSS 行来解决：

white-space: pre-wrap;

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

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

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

#preview {
  white-space: pre;
}

这应该使文本区域中的换行符在预览<div>中正确显示。

下面是一个小提琴的例子：https://jsfiddle.net/00nmk83y/

相关文章：