JavaScript - 表單事件

表單事件

JavaScript 中的表單事件是與 HTML 表單關聯的事件。這些事件由使用者在與表單元素（如文字欄位、按鈕、複選框等）互動時觸發的操作觸發。表單事件允許您根據這些操作執行 JavaScript 程式碼，使您能夠驗證表單資料、在表單提交或重置時執行操作以及增強使用者體驗。

JavaScript 表單事件掛接到文件物件模型（也稱為 DOM）中的元素上，其中預設使用冒泡傳播，即從底部（子元素）到頂部（父元素）。

常見表單事件列表

以下是一些常見的表單事件

表單事件	描述
onsubmit	在提交表單時觸發。它通常用於在將資料傳送到伺服器之前進行表單驗證。
onreset	在重置表單時觸發，允許您在使用者重置表單時執行操作。
onchange	在表單元素（輸入、選擇、文字區域）的值更改時觸發。通常用於使用者輸入驗證或動態更新。
oninput	在輸入元素的值更改時立即觸發，允許即時處理使用者輸入。
onfocus	在元素獲得焦點時觸發，例如當用戶單擊或製表到輸入欄位時。用於提供反饋或增強使用者體驗。
onblur	在元素失去焦點時觸發，例如當用戶單擊輸入欄位外部或製表離開時。用於驗證或由失去焦點觸發的更新。

示例

示例：onchange 事件

下面提供的示例說明了 onchange 事件的功能。此事件在使用者更改下拉列表（<select>）選項選擇時啟用。函式 handleChange 會動態修改 <h2> 元素以顯示新選擇的國家/地區；從而在使用者偏好發生變化時提供即時反饋。

<!DOCTYPE html>
<html>
<body>
   <label for="country">Select a country:</label>
   <select id="country" onchange="handleChange()">
      <option value="USA">USA</option>
      <option value="Canada">Canada</option>
      <option value="UK">UK</option>
      <option value="India">India</option>
   </select>
   <p id="txt"></p>
   <script>
      function handleChange() {
         // Perform actions when the dropdown selection changes
         var selectedCountry = document.getElementById('country').value;
         document.getElementById("txt").textContent=
		 "Selected country: "+selectedCountry;
     }
   </script>
</body>
</html>

示例：onsubmit 事件

以下示例重點介紹了在表單提交時 onsubmit 事件的功能。該表單具有使用者名稱欄位和密碼欄位；在呼叫 validateForm 函式時，兩者都必須填寫才能成功驗證。透過此驗證後，提交表單將觸發顯示確認訊息。

<!DOCTYPE html>
<html>
<body>
   <form onsubmit="return validateForm()">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
      <br/>
      <input type="submit" value="Submit">
   </form>
   <script>
      function validateForm() {
         var username = document.getElementById('username').value;
         var password = document.getElementById('password').value;
         // Perform validation
         if (username === "" || password === "") {
            alert("Please fill in all fields");
            return false; // Prevent form submission
         }
         alert("Form submitted! Username is:"+username+",Password is:"+password);      
         return true; // Allow form submission
      }
   </script>
</body>
</html>

示例：onreset 事件

在此演示中，我們觀察了 onreset 事件的實際應用：它在使用者單擊表單中的“重置”按鈕時觸發。resetForm 函式一旦被呼叫，就會清除使用者填寫的表單內容，然後顯示一個警報以確認已成功重置該表單。

<!DOCTYPE html>
<html>
<body>
   <form onreset="resetForm()">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      <input type="reset" value="Reset">
   </form>
   <script>
      function resetForm() {
         // Perform actions when the form is reset
         alert("Form has been reset!");
      }
   </script>
</body>
</html>

示例：oninput 事件

此示例演示了 oninput 事件：當用戶在搜尋輸入欄位中鍵入時，會立即觸發一個即時操作！handleInput 函式被觸發；它將當前的每個搜尋輸入直接記錄到螢幕上。

<!DOCTYPE html>
<html>
<body>
   <label for="search">Search:</label>
   <input type="text" id="search" oninput="handleInput()">
   <div id="message" style=" margin-top: 10px; font-weight: lighter;border: 1px solid #ddd;padding: 10px; background-color: #f9f9f9; border-radius: 5px; font-family: 'Arial', sans-serif; font-size: 14px; color: #333; width: 30%;"></div>

   <script>
      var messageElement = document.getElementById('message');
      function handleInput() {
         // Perform actions as the user types
         var searchInput = document.getElementById('search').value;
         messageElement.innerHTML+="Search input: " + searchInput+'<br>';
      }
   </script>
</body>
</html>

示例：onfocus 和 onblur 事件

此示例中合併了 onfocus 和 onblur 事件。使用者將焦點放在輸入欄位上會觸發對 handleFocus 函式的呼叫，該函式隨後將訊息記錄到控制檯。相反，當點選輸入欄位外部或離開該輸入欄位時 - 此操作會觸發另一個名為 handleBlur 的函式的執行，該函式隨後在同一控制檯日誌中記錄一條替代訊息。

<!DOCTYPE html>
<html>
<body>
   <label for="name">Name:</label>
   <input type="text" id="name" onfocus="handleFocus()" onblur="handleBlur()">
   <p id= "output"></p>
   <script>
      const output = document.getElementById('output');
      function handleFocus() {
         // Perform actions when the input gets focus
         output.innerHTML += "Input has focus" + "<br>";
      }
      function handleBlur() {
         // Perform actions when the input loses focus
         output.innerHTML += "Input lost focus" + "<br>";
      }
   </script>
</body>
</html>

列印頁面