JavaScript - 表单事件

表单事件

JavaScript 中的表单事件是与 HTML 表单关联的事件。这些事件由用户与表单元素(例如文本字段、按钮、复选框等)交互时的操作触发。表单事件允许您执行 JavaScript 代码来响应这些操作，从而验证表单数据、执行表单提交或重置操作，并提升用户体验。

JavaScript 表单事件与文档对象模型(也称为 DOM)中的元素挂钩，默认情况下使用冒泡传播，即从底部(子元素)到顶部(父元素)。

常见表单事件列表

以下是一些常见的表单事件:

示例

示例: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() {
         // 当下拉选择改变时执行操作
         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;
         // 执行验证
         if (username === "" || password === "") {
            alert("Please fill in all fields");
            return false; // 阻止表单提交
         }
         alert("Form submitted! Username is:"+username+",Password is:"+password);      
         return true; // 允许表单提交
      }
   </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() {
         // 表单重置时执行的操作
         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() {
         // 根据用户输入执行操作
         var searchInput = document.getElementById('search').value;
         messageElement.innerHTML+="Search input: " + searchInput+'<br>';
      }
   </script>
</body>
</html>

示例:onfocus 和 onblur 事件

本例中，onfocus 和 onblur 事件合并。用户聚焦于输入字段会触发对 handleFocus 函数的调用，该函数随后会在控制台中记录一条消息。相反，当用户点击输入字段外部或 Tab 键离开输入字段时，此操作会触发另一个名为 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() {
         // 当输入获得焦点时执行操作
         output.innerHTML += "Input has focus" + "<br>";
      }
      function handleBlur() {
         // 当输入失去焦点时执行操作
         output.innerHTML += "Input lost focus" + "<br>";
      }
   </script>
</body>
</html>