JavaScript裡有重置按鈕嗎

JavaScript 是一種廣泛使用的程式語言，它可以與 HTML 和 CSS 相結合，使 Web 網站和 Web 應用程式變得更加互動性和動態化。然而，在使用 JavaScript 時，您可能會遇到重置表單的需要，這是一個常見的需求。在本文中，我們將探討 JavaScript 中的重置按鈕及其使用方法。

首先，需要明確的是，form 元素是 HTML 表單中最重要的元素之一，它用於捕獲使用者輸入的資料並將其提交到伺服器進行處理。在 form 元素中，可以新增按鈕，包括按鈕、提交按鈕、重設按鈕等。其中，重置按鈕的作用是將表單中的所有資料重設為預設值或空值。

在 JavaScript 中，有幾種方法可以實現重置按鈕的功能。以下我們將逐一介紹這些方法。

1. 使用表單元素的reset 方法

在JavaScript 中，表單元素有一個內建的方法叫做reset()，可以用來重置表單中的所有輸入域和選項。例如：

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="reset" value="Reset">
</form>

<script>
  var myForm = document.getElementById("myForm");
  myForm.addEventListener("reset", function(event){
    console.log("表单已重置");
  });
</script>

在上述程式碼中，表單元素包含一個輸入域和一個下拉列錶框，以及一個 reset 類型的按鈕。當使用者按一下重設按鈕時，會觸發表單元素的 reset() 方法，從而將表單中的所有輸入網域和選項重設為預設值或空值。同時，上面的 JavaScript 程式碼也監聽了表單的 reset 事件，當表單重置時，會列印一則訊息到控制台中。

2. 建構一個新的表單並將其取代舊表單

另一種實作重設按鈕功能的方法是，建構一個新的表單並將其替換舊表單。例如：

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="button" value="Reset" onclick="resetForm()">
</form>

<script>
  function resetForm() {
    var oldForm = document.getElementById("myForm");
    var newForm = document.createElement("form");
    newForm.id = "myForm";
    oldForm.parentNode.replaceChild(newForm, oldForm);
  }
</script>

在上述程式碼中，表單元素包含一個輸入域和一個下拉列錶框，以及一個 button 類型的按鈕。當使用者點擊重設按鈕時，會呼叫resetForm() 函數，其中，首先取得了舊表單元素，然後使用createElement() 方法建立了一個新的表單元素，並使用replaceChild() 方法將新表單元素替換舊表單元素。這樣，就等於是將表單全部重設了。

要注意的是，在使用這種方法時，可能會損失一些表單屬性、事件處理程序等信息，因此只適用於簡單的表單重置。

3. 手動重設表單元素的值

最後一種實作重設按鈕功能的方法是，手動重設表單元素的值。例如：

<form id="myForm">
  <input type="text" id="username" name="username" value="ABC">
  <select id="country" name="country">
    <option value="">请选择国家</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <input type="button" value="Reset" onclick="resetForm()">
</form>

<script>
  function resetForm() {
    var inputs = document.getElementById("myForm").getElementsByTagName("input");
    for(var i=0; i<inputs.length; i++) {
      switch(inputs[i].type) {
        case "text":
          inputs[i].value = "";
          break;
        case "checkbox":
        case "radio":
          inputs[i].checked = false;
          break;
        default:
          break;
      }
    }
    
    var selects = document.getElementById("myForm").getElementsByTagName("select");
    for(var i=0; i<selects.length; i++) {
      selects[i].selectedIndex = 0;
    }
  }
</script>

在上述程式碼中，表單元素包含一個輸入域和一個下拉列錶框，以及一個 button 類型的按鈕。當使用者按一下重設按鈕時，會呼叫resetForm() 函數，其中，首先取得表單元素的所有輸入網域和下拉列錶框，並遍歷每個元素，將它們的值都重設為預設值或空值。具體來說，對於文字方塊和密碼框，將它們的值設為空；對於單選框和複選框，將它們的選取狀態設為未選取；對於下拉列錶框，將它們的選取項設為第一項。

需要注意的是，如果表單中包含其他類型的表單元素，如文字網域、密碼網域、圖片網域等，則還需要根據具體情況對它們進行重設。

綜上所述，JavaScript 中有多種方法可以實現表單的重置，其中，表單元素自帶的 reset() 方法是最為簡單和直接的。但如果您需要更靈活自訂重置的功能，可以使用後兩種方法。無論哪種方法，都可以輕鬆實現表單重置的需求，為使用者帶來更好的體驗。

以上是JavaScript裡有重置按鈕嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！