js实现reset功能
实现JavaScript的reset功能
在JavaScript中实现reset功能通常指重置表单或特定元素的状态。以下是几种常见的实现方式：
表单重置
使用表单元素的reset()方法可以快速重置表单内所有输入字段到初始值：
document.getElementById('myForm').reset();手动重置表单字段值
当需要更精细控制或处理非表单元素时，可以手动设置值：
const form = document.querySelector('form');
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
if(input.type === 'checkbox' || input.type === 'radio') {
input.checked = input.defaultChecked;
} else {
input.value = input.defaultValue;
}
});重置特定输入字段
针对单个输入元素的复位：
document.getElementById('email').value = '';
document.getElementById('remember').checked = false;使用事件监听器
为重置按钮添加事件处理：
document.getElementById('resetBtn').addEventListener('click', function() {
document.querySelectorAll('.form-control').forEach(el => {
el.value = '';
});
});使用对象存储初始值
对于复杂表单，可先保存初始状态：
const initialState = {};
const form = document.getElementById('myForm');
// 保存初始值
Array.from(form.elements).forEach(el => {
if(el.name) initialState[el.name] = el.value;
});
// 重置函数
function resetForm() {
Object.keys(initialState).forEach(key => {
form.elements[key].value = initialState[key];
});
}注意事项
reset()方法会将表单恢复到页面加载时的初始状态，而非清空- 单选按钮和复选框会恢复到默认选中状态
- 对于动态添加的字段，需要特殊处理
- 现代前端框架(Vue/React等)通常有各自的状态管理重置方式
