JavaScript表单事件(上篇)
目录
一、input: 当表单元素的值发生改变时触发，适用于大多数表单元素。
二、change: 当表单元素的值发生改变且失去焦点时触发，适用于输入框、下拉列表等。
三、submit: 当表单提交时触发，适用于 form 元素。
四、reset: 当表单重置时触发，适用于 form 元素。
五、focus: 当表单元素获得焦点时触发。
六、blur: 当表单元素失去焦点时触发。
七、select: 当文本框或文本区域中的文本被选中时触发。
一、input: 当表单元素的值发生改变时触发，适用于大多数表单元素。
表单事件input常用于实时监听输入框的变化，并进行相应的处理。它适用于需要在用户输入内容时立即响应的场景，例如实时搜索、输入框字符限制、动态更新计算结果等。
以下是一个简单的例子，当用户在输入框中输入文字时，实时统计输入的字符数并显示在页面上：
<!DOCTYPE html>
<html>
<head><title>实时字符统计</title>
</head>
<body><label for="input-text">输入文本：</label><input type="text" id="input-text"><p id="char-count">字符数：0</p><script>// 获取输入框和字符统计区域元素var inputText = document.getElementById('input-text');var charCount = document.getElementById('char-count');// 监听input事件inputText.addEventListener('input', function() {// 获取输入框的值var value = inputText.value;// 统计字符数var count = value.length;// 更新字符统计区域的内容charCount.textContent = '字符数：' + count;});</script>
</body>
</html>
二、change: 当表单元素的值发生改变且失去焦点时触发，适用于输入框、下拉列表等。
表单事件change适用于需要监听表单元素值的变化，并在值发生变化后进行相应处理的场景。它与input事件不同之处在于，change事件在用户提交表单或离开表单元素时才会触发，而input事件在用户每次输入时都会触发。
以下是一个简单的例子，当用户选择不同的选项时，根据选择的选项显示不同的提示信息：
<!DOCTYPE html>
<html>
<head><title>选择提示信息</title>
</head>
<body><label for="select-option">选择选项：</label><select id="select-option"><option value="option1">选项1</option><option value="option2">选项2</option><option value="option3">选项3</option></select><p id="message">请选择一个选项</p><script>// 获取选择框和提示信息元素var selectOption = document.getElementById('select-option');var message = document.getElementById('message');// 监听change事件selectOption.addEventListener('change', function() {// 获取选择的值var selectedValue = selectOption.value;// 根据选择的值显示相应的提示信息if (selectedValue === 'option1') {message.textContent = '您选择了选项1';} else if (selectedValue === 'option2') {message.textContent = '您选择了选项2';} else if (selectedValue === 'option3') {message.textContent = '您选择了选项3';}});</script>
</body>
</html>
三、submit: 当表单提交时触发，适用于 form 元素。
表单事件submit适用于需要在用户提交表单时执行一些操作的场景。通过监听submit事件，可以在用户点击提交按钮或按下回车键提交表单时触发相应的处理函数，例如数据验证、表单提交等操作。
以下是一个简单的例子，当用户提交表单时，通过JavaScript的submit事件在控制台输出表单数据：
<!DOCTYPE html>
<html>
<head><title>表单提交</title>
</head>
<body><form id="my-form"><label for="name">姓名：</label><input type="text" id="name" name="name" required><label for="email">邮箱：</label><input type="email" id="email" name="email" required><button type="submit">提交</button></form><script>var form = document.getElementById('my-form');form.addEventListener('submit', function(event) {event.preventDefault();// 获取表单数据var name = document.getElementById('name').value;var email = document.getElementById('email').value;// 输出表单数据到控制台console.log('姓名:', name);console.log('邮箱:', email);});</script>
</body>
</html>
四、reset: 当表单重置时触发，适用于 form 元素。
reset事件在表单重置时触发，可以用于执行一些重置操作或者在重置表单时进行一些特定的处理。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head><title>表单重置</title>
</head>
<body><form id="my-form"><label for="name">姓名：</label><input type="text" id="name" name="name" value="John Doe"><label for="email">邮箱：</label><input type="email" id="email" name="email" value="johndoe@example.com"><button type="reset">重置</button></form><script>var form = document.getElementById('my-form');form.addEventListener('reset', function(event) {// 在重置表单时执行特定的操作console.log('表单已重置');// 可以在这里进行一些其他的处理，例如清空输入框内容、恢复默认选项等});</script>
</body>
</html>
五、focus: 当表单元素获得焦点时触发。
focus事件在表单元素获取焦点时触发，可以用于在用户焦点进入表单元素时执行一些特定的操作。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head><title>表单焦点</title>
</head>
<body><form><label for="name">姓名：</label><input type="text" id="name" name="name"><label for="email">邮箱：</label><input type="email" id="email" name="email"><button type="submit">提交</button></form><script>var nameInput = document.getElementById('name');var emailInput = document.getElementById('email');nameInput.addEventListener('focus', function(event) {// 在姓名输入框获取焦点时执行特定的操作console.log('姓名输入框获取焦点');});emailInput.addEventListener('focus', function(event) {// 在邮箱输入框获取焦点时执行特定的操作console.log('邮箱输入框获取焦点');});</script>
</body>
</html>
在上述例子中，我们分别监听了姓名输入框和邮箱输入框的focus事件，并在事件处理函数中执行一些特定的操作。在这个例子中，我们简单地在控制台输出了一条消息来表示哪个输入框获取了焦点。你可以根据具体需求在focus事件中添加自定义的操作，例如显示辅助提示、改变样式等。
六、blur: 当表单元素失去焦点时触发。
blur事件在表单元素失去焦点时触发，可以用于在用户焦点离开表单元素时执行一些特定的操作。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head><title>表单失去焦点</title>
</head>
<body><form><label for="name">姓名：</label><input type="text" id="name" name="name"><label for="email">邮箱：</label><input type="email" id="email" name="email"><button type="submit">提交</button></form><script>var nameInput = document.getElementById('name');var emailInput = document.getElementById('email');nameInput.addEventListener('blur', function(event) {// 在姓名输入框失去焦点时执行特定的操作console.log('姓名输入框失去焦点');});emailInput.addEventListener('blur', function(event) {// 在邮箱输入框失去焦点时执行特定的操作console.log('邮箱输入框失去焦点');});</script>
</body>
</html>
在上述例子中，我们分别监听了姓名输入框和邮箱输入框的blur事件，并在事件处理函数中执行一些特定的操作。在这个例子中，我们简单地在控制台输出了一条消息来表示哪个输入框失去了焦点。你可以根据具体需求在blur事件中添加自定义的操作，例如校验输入内容、保存数据等。
七、select: 当文本框或文本区域中的文本被选中时触发。
select事件在用户选择文本时触发，它适用于需要对选定文本进行操作或响应的场景。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head><title>文本选择</title>
</head>
<body><p>请在下方文本框内选择一段文本：</p><textarea id="myTextarea" rows="4" cols="50"></textarea><script>var textarea = document.getElementById('myTextarea');textarea.addEventListener('select', function(event) {// 在文本选择发生时执行特定的操作var selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);console.log('选中的文本：', selectedText);});</script>
</body>
</html>
在上述例子中，我们监听了文本框的select事件，并在事件处理函数中获取了选中的文本。通过使用textarea.selectionStart和textarea.selectionEnd属性，我们可以获取到选中文本的起始位置和结束位置，然后使用substring方法提取出选中的文本。在这个例子中，我们简单地在控制台输出了选中的文本内容。你可以根据具体需求，在select事件中添加自定义的操作，例如执行剪切、复制、格式化等操作。