Html 提供的 Type reset 按鈕，是給 input 和 textarea 輸入框架，用作清除內容，方便使用者一鍵清空內容，但是，HTML 預設的"reset"清除按鈕，無法清空"value"預設值，以下JS代碼可以做得到。
代碼分層不同場境，用作不同的效果。
包括：全部清除、自由放置、單獨清空不同屬性的框架。
開始!...
Html 預設的重置按鈕：
<input type="reset" value="清除" /> OR <button type="reset">重置</button>
範例：
<form id="form" name="form">
<input type="file" name="" />
<br />
<br />
<textarea name="text" rows="" cols="" style="width:160px;height:50px;display:block;"></textarea>
<br />
<input type="text" name="" />
<input type="text" name="" />
<br />
<br />
<input type="reset" value="清除" />
<br />
<br />
<button type="reset">Reset</button>
</form>默認的 HTML 重置按鈕，是無法清除"value"的預設值。
如果你想清除 input 或 textarea 的默認內容，同時也想清空"value"及預設內容，請使用下列代碼。
01. 全部清除 id="if-1s1a or if-1s1b"
JS:
<script type="text/javascript">
function ClearText1s1a() {
var inputs = document.querySelectorAll("#if-1s1a input, #if-1s1a textarea");
inputs.forEach(function(input) {
if (input.type === "text" || input.type === "file") {
input.value = "";
} else if (input.tagName.toLowerCase() === "textarea") {
input.value = "";
}
});
}
</script>Html:
<form id="if-1s1a" name="love">
<input type="text" name="bb1" value="a1" />
<input type="text" name="bb2" value="a2" />
<input type="text" name="bb3" value="a3" />
<input type="text" name="bb4" value="" />
<input type="text" name="bb5" value="" />
<br /><br />
<input type="file" name="the_upload" />
<br /><br />
<textarea name="text" id="text" rows="" cols="" style="width:160px;height:50px;"></textarea>
<br /><br />
<textarea name="text" id="text" rows="" cols="" style="width:160px;height:50px;">請輸入文字</textarea>
<br /><br />
<input type="button" onClick="ClearText1s1a()" value="清除01" /> <!-- 用 if-1s1b 改 ClearText1s1b -->
</form>02. 自由放或 Form ID 被佔用時 Span Div id="if-1s1a or if-1s1b"
JS:
<script type="text/javascript">
function ClearText1s1b() {
var inputs = document.querySelectorAll("#if-1s1b input, #if-1s1b textarea");
inputs.forEach(function(input) {
if (input.type === "text" || input.type === "file") {
input.value = "";
} else if (input.tagName.toLowerCase() === "textarea") {
input.value = "";
}
});
}
</script>Html:
<form id="" name="love">
<input type="text" name="bb1" value="a1" />
<input type="text" name="bb5" value="" />
<span id="if-1s1b">
<input type="text" name="bb2" value="a2" />
<br /><br />
<textarea name="text" id="text" rows="" cols="" style="width:160px;height:50px;"></textarea>
</span>
<br /><br />
<input type="button" onClick="ClearText1s1b()" value="清除02" /> <!-- 用 if-1s1a 改 ClearText1s1a -->
</form>03. 單獨清空 id="if-1s2"
JS:
<script type="text/javascript">
function ClearText1s2() {
var inputs = document.querySelectorAll("#if-1s2");
inputs.forEach(function(input) {
if (input.type === "text" || input.type === "file") {
input.value = "";
} else if (input.tagName.toLowerCase() === "textarea") {
input.value = "";
}
});
}
</script>Html:
<form name="love">
<input type="text" id="if-1s2" name="bb1" value="a1" />
<input type="text" name="bb2" value="a2" />
<input type="text" name="bb3" value="a3" />
<input type="text" name="bb4" value="" />
<input type="text" id="if-1s2" name="bb5" value="" />
<br /><br />
<input type="file" id="if-1s2" name="the_upload" />
<br /><br />
<textarea name="text" id="text" rows="" cols="" style="width:160px;height:50px;"></textarea>
<br /><br />
<textarea name="text" id="if-1s2" rows="" cols="" style="width:160px;height:50px;">請輸入文字</textarea>
<br /><br />
<input type="button" onClick="ClearText1s2()" value="清除03" />
</form>