在提交之前創建一個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預覽

回答

相關問題