JavaScript清空輸入框的方法

一、使用value屬性清空輸入框

清空一個輸入框可以使用其value屬性將輸入框的文本內容設為空字符串：

document.getElementById("myInput").value = "";

其中，”myInput”是輸入框的id，可以根據實際情況進行更改。

此方法適用於單個輸入框的清空操作，並且無需引入外部庫。

二、使用jQuery框架清空輸入框

如果需要清空多個輸入框，可以使用jQuery框架中的val()方法，比使用原生JS更為方便快捷：

//清空全部輸入框
$('input').val('');
//清空指定的輸入框
$('#myInput').val('');

其中，”$”為jQuery對象的表示符號，”input”表示所有標籤元素，”myInput”為具體輸入框的id。val()方法用於設置value屬性的值。

需要注意的是，使用jQuery框架需要在HTML文件中引入對應的jQuery庫。

三、使用原生JavaScript批量清空輸入框

除了使用jQuery框架，還可以使用原生JavaScript實現批量清空輸入框的操作。

首先，需要獲取所有的輸入框元素。可以通過getElementsByTagName()方法來獲取頁面中所有類型的元素：

var inputs = document.getElementsByTagName("input");

接下來，可以循環遍歷inputs數組，並使用第一種方法中介紹的value屬性將輸入框清空：

for (var i = 0; i < inputs.length; i++) {
  inputs[i].value = '';
}

此方法可以實現批量清空多個輸入框的操作，無需引入外部庫。

四、針對特定類型的輸入框清空操作

在實際開發中，不同類型的輸入框可能需要採取不同的清空方式。

例如，對於textarea標籤元素，可以使用innerHTML屬性將其內容清空：

document.getElementById("myTextarea").innerHTML = "";

對於下拉選擇框元素，可以使用selectedIndex屬性將選擇項重置為默認值：

document.getElementById("mySelect").selectedIndex = 0;

需要注意的是，在清空checkbox、radio等類型的輸入框時，應將其選中狀態取消：

document.getElementById("myCheckbox").checked = false;
document.getElementById("myRadio").checked = false;

五、結語

通過以上幾種方法，我們可以輕鬆地清空頁面中的各種輸入框。

需要根據具體情況選擇不同的方法進行清空操作，同時也需要注意不同輸入框類型的特殊處理。

下面是一個完整的使用原生JavaScript批量清空輸入框的示例代碼：

<input id="input1" type="text">
<input id="input2" type="text">
<textarea id="textarea1"></textarea>
<select id="select1">
  <option value="1">選項1</option>
  <option value="2">選項2</option>
  <option value="3">選項3</option>
</select>

<button onclick="clearInputs()">清空所有輸入框</button>

<script>
function clearInputs() {
  var inputs = document.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = '';
    if (inputs[i].type === "checkbox" || inputs[i].type === "radio") {
      inputs[i].checked = false;
    }
  }
  document.getElementById("textarea1").innerHTML = '';
  document.getElementById("select1").selectedIndex = 0;
}
</script>