JavaScript 清除輸入
Anika Tabassum Era
2023年1月30日
JavaScript
JavaScript Input
在 JavaScript 中，我們通常會考慮一個特定的屬性來處理輸入值。value 屬性與 getElementById() 方法一起獲取輸入欄位的詳細資訊。
稍後，我們可以根據條目執行一些條件。同樣，我們也可以依賴一些 HTML 屬性來連線輸入元素和 JavaScript 函式。
在這裡，我們將展示一些可以通過多種方式實現的示例。
在 JavaScript 中使用 onfocus 屬性清除輸入欄位
我們將首先為該示例宣告一個具有定義值的輸入欄位。此外，一旦游標指向或聚焦在輸入框中，輸入元素將跳轉以執行函式 clearF(this)。
如果滿足函式的條件，它將刪除該值，從而清除輸入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<input type="text" value= "abc@gmail.com" onfocus="clearF(this)">
<script>
function clearF(target) {
if (target.value == 'abc@gmail.com') {
target.value = "";
}
}
</script>
</body>
</html>
輸出：
當游標放置並單擊輸入欄位時，其內容消失。this 指的是它對特定元素的值。
在 JavaScript 中使用條件語句清除表單輸入值
根據一個表單提交，需要有一個對應的按鈕元素來儲存資料。我們將採用一個 form 元素，與之關聯的 button 將帶有一個 onclick 屬性來觸發一個函式。
該函式將檢查輸入欄位是否為空。如果它找到任何內容，它將簡單地將其重新初始化為空。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<form>
<input type="text" id="name">
<input type="button" value="clear" onclick="clearF()">
</form>
<script>
function clearF() {
var grab = document.getElementById("name");
if (grab.value !="") {
grab.value = "";
}
}
</script>
</body>
</html>
輸出：
在這裡，我們有一個將採用 id 的 grab 表單例項。單擊按鈕時，該函式將檢查輸入是否為空，並按照條件語句描述的方式執行。
使用 reset() 方法來清除 JavaScript 中的表單輸入欄位
我們還將檢查表單以通過 reset() 方法清除其輸入。它所需要的只是建立表單的一個例項，然後單擊按鈕，它將重置整個表單，使插入的內容消失。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<form id="Form">
Name: <input type="text"><br><br>
<input type="button" onclick="myFunction()" value="Reset form">
</form>
<script>
function myFunction() {
document.getElementById("Form").reset();
}
</script>
</body>
</html>
輸出：
%60-Method-to-Erase-Form-Input-Fields.webp)
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
