JavaScript - 表单事件

表单事件

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

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

常见表单事件列表

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

表单事件	描述
onsubmit	在提交表单时触发。它通常用于在将数据发送到服务器之前进行表单验证。
onreset	在重置表单时触发，允许您在用户重置表单时执行操作。
onchange	当表单元素（input、select、textarea）的值发生更改时触发。通常用于用户输入验证或动态更新。
oninput	当 input 元素的值发生变化时立即触发，允许实时处理用户输入。
onfocus	当元素获得焦点时触发，例如当用户单击或 Tab 键进入输入字段时。有助于提供反馈或增强用户体验。
onblur	当元素失去焦点时触发，例如当用户在输入字段外部或 Tab 键外单击时。对于因焦点丢失而触发的验证或更新很有用。

例子

示例：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 事件的功能。该表单具有 username 字段和 password 字段;在调用 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 事件的运行情况：当用户单击表单中的 “Reset” 按钮时，它会触发该事件。调用 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 事件合并。用户对 input 字段的关注会触发对 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() {
	 	 	 	 	// 当输入获得焦点时执行操作
	 	 	 	 	output.innerHTML += "Input has focus" + "<br>";
	 	 	 }
	 	 	 function handleBlur() {
	 	 	 	 	// 当输入失去焦点时执行操作
	 	 	 	 	output.innerHTML += "Input lost focus" + "<br>";
	 	 	 }
	 	</script>
</body>
</html>

<< JavaScript - 键盘事件 JavaScript - 窗口/文档事件 >>