Javascript 简明教程

JavaScript - Form Events

Form Events

JavaScript 中的表单事件与 HTML 表单相关。当用户与文本字段、按钮、复选框等表单元素交互时，这些事件会由用户操作触发。表单事件允许你针对这些操作执行 JavaScript 代码，从而能够验证表单数据、对表单提交或重置执行操作并增强用户体验。

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

List of Common Form Events

以下是部分常用表单事件：

Form Event

Description

onsubmit

当表单提交时触发。通常用于数据发送到服务器之前进行表单验证。

onreset

表单被重置时触发，允许你在用户重置表单时执行操作。

onchange

当表单元素（输入、下拉、文本区域）的值发生更改时触发。通常用于用户输入验证或动态更新。

oninput

在输入元素的值发生更改时立即触发，允许实时处理用户输入。

onfocus

当元素获取焦点时触发，比如当用户点击或通过 Tab 键切换到输入字段时触发。这对于提供反馈或增强用户体验非常有用。

onblur

当元素失去焦点时触发，比如当用户在输入字段外单击或通过 Tab 键切换走时触发。可用于在失去焦点时进行验证或更新。

Examples

Example: The onchange Event

下面提供的示例展示了 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>

Example: The onsubmit Event

以下示例重点介绍了 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>

Example: The onreset event

在这个演示中，我们观察了 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>

Example: The oninput Event

此示例展示了 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>

Example: onfocus and onblur Events

在这个示例中，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() {
         // 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>