在提交之前创建一个textarea预览

请大家，我想创建一个页面，它的作用就像STACKOVERFLOW ，它立即显示文本，就像在textarea中输入时所写的那样，我不擅长javascript但我也没搞清楚，这样的代码：在提交之前创建一个textarea预览

$("#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,'')); 
});

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

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

这里是html代码：

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

这不是很多，我想它不相关的。

由于提前

来源

2016-04-29 KANAYO AUSTIN KANE

你能拖放到的jsfiddle这？ – WillardSolutions

我们也可以看到与此相对应的HTML吗？我们不需要整个页面，只是与代码相关的东西 – Jhecht

您在您的文章提到的具体问题，即换行不被保存，可以固定与CSS的简单的一行：

white-space: pre-wrap;

然而，你的代码还有其他的错误。最重要的是，你重复地分配元素的innerHTML（尽管通过jQuery的.html()函数）并从中读取。您应该几乎从来没有从innerHTML读...

相反，先从preview = $(this).val();，然后执行您的各种替换或解析在preview，然后终于，在最后，$("#preview").html(preview);

来源

2016-04-29 15:20:03

谢谢尼提......但是您认为我的方法是一个很好的方法吗？ –

不，我不知道。你应该解析文本，而不是应用盲目的正则表达式替换它，但这就像我的意见：p编写解析器是一个很大的工作，但结果是好得多。 –

谢谢，我会为它付出 –

如果我正确理解你的情况，我建议要么让你#preview <div>成#preview <pre>，或添加这个CSS：

#preview { 
    white-space: pre; 
}

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

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

来源

2016-04-29 15:19:06

在提交之前创建一个textarea预览

回答

相关问题