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>

打印页面