JavaScript 清除輸入

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 onfocus 屬性清除輸入欄位
  2. 在 JavaScript 中使用條件語句清除表單輸入值
  3. 使用 reset() 方法來清除 JavaScript 中的表單輸入欄位
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>

輸出:

使用條件語句清除表單輸入值

在這裡,我們有一個將採用 idgrab 表單例項。單擊按鈕時,該函式將檢查輸入是否為空,並按照條件語句描述的方式執行。

使用 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>

輸出:

使用 reset() 方法擦除表單輸入欄位

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript Input