JavaScript 清除輸入

Anika Tabassum Era 2023年1月30日 2022年5月10日

JavaScript JavaScript Input

在 JavaScript 中使用 onfocus 屬性清除輸入欄位
在 JavaScript 中使用條件語句清除表單輸入值
使用 reset() 方法來清除 JavaScript 中的表單輸入欄位

在 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>

輸出：

使用 onfocus 屬性來消除輸入欄位

當游標放置並單擊輸入欄位時，其內容消失。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>