如何僅重置texbox，而不重置整個頁面？

Question

我正在嘗試創建一個發布/評論系統。 它可以滿足我的大部分需求。 現在，我只想重置文本框，而不是整個頁面。 骨架代碼由CodePen預設。 （有關代碼示例的更多說明）

HTML：

<form id="frmPost" name="write">
    <div class="textbox">
        <input class="postwriter" name="post" type="text" placeholder="What's on your mind?" id="txtPost">
        <button id="btnPost" onclick= "return write_below(this); resetText();" value="submit" >Post</button>
    </div>
</form>
<div class="posts" id="postDisplay">
    <p class="para"><span id='display'></span></p>
</div>

JS：

function resetText() {
    document.getElementById('txtPost').value="";
    //return false;
}
function write_below(form){
    var input = document.forms.write.post.value;
    //document.getElementById('display').innerHTML += input + "<br/>" + "<br/>";
    document.getElementById('display').innerHTML += "<p>" + Math.floor(Math.random()*20) + ": " + input + "</p>" + "<br/>";
    return false;
}

這樣，帖子將保留，但文本框將重置。 如果我放棄/注釋掉第二個，則return false; 整個頁面重置。

Answer 1

所有你需要做的就是調用resetText()從write_below()

 function resetText() { document.getElementById('txtPost').value=""; } function write_below(form){ var input = document.forms.write.post.value; document.getElementById('display').innerHTML += "<p>" + Math.floor(Math.random()*20) + ": " + input + "</p>" + "<br/>"; resetText(); return false; }

 <form id="frmPost" name="write"> <div class="textbox"> <input class="postwriter" name="post" type="text" placeholder="What's on your mind?" id="txtPost"> <button id="btnPost" onclick= "return write_below(this);" value="submit" >Post</button> </div> </form> <div class="posts" id="postDisplay"> <p class="para"><span id='display'></span></p> </div>

Answer 2

單擊提交按鈕時，表單的默認操作是發出請求。 如果在<form action=""></form>未指定目的地，則默認位置為"/" （當前頁面）。 這將重新加載頁面。

當您說return false您將向調用方（窗體）返回一個false值。 這會拒絕正確提交表單，從而阻止重新加載。

保留return false; 在那里實現您的結果。

Answer 3

為什么要編寫冗長的JavaScript或JQuery

您可以將清除按鈕的類型設置為“重置”。 它將清除您的所有表單字段，而無需重新加載網頁。

例如。

 <html>
        <body>
               <form>
                        <input type="text" name="demo">
                        <button type="reset">Clear</button>
                         <button type="submit">Submit</button>
                 </form>
         </body>
  </html>

如何僅重置texbox，而不重置整個頁面？

問題描述

3 個解決方案

解決方案1
2 已采納 2016-12-15 21:25:52

解決方案2
0 2016-12-15 19:37:05

解決方案3
0 2016-12-16 06:35:42

如何僅重置texbox，而不重置整個頁面？

問題描述

3 個解決方案

解決方案1 2 已采納 2016-12-15 21:25:52

解決方案2 0 2016-12-15 19:37:05

解決方案3 0 2016-12-16 06:35:42

解決方案1
2 已采納 2016-12-15 21:25:52

解決方案2
0 2016-12-15 19:37:05

解決方案3
0 2016-12-16 06:35:42