当前位置：首页 > JavaScript

js实现重置功能

2026-03-15 21:39:23JavaScript

重置表单数据

使用HTMLFormElement.reset()方法可以快速重置表单内所有输入字段的值。适用于通过<form>标签包裹的表单元素。

document.getElementById("myForm").reset();

手动清空输入字段

对于非表单元素或需要更灵活控制的场景，可以遍历所有输入字段并手动设置值为空或默认值。

const inputs = document.querySelectorAll("input, textarea, select");
inputs.forEach(input => {
  if (input.type === "checkbox" || input.type === "radio") {
    input.checked = false;
  } else {
    input.value = "";
  }
});

使用事件监听器

为重置按钮添加点击事件监听器，触发时执行重置操作。注意阻止表单默认提交行为。

document.getElementById("resetBtn").addEventListener("click", function(e) {
  e.preventDefault();
  document.querySelector("form").reset();
});

状态管理重置

在React/Vue等框架中，需要重置组件状态。以React为例，通过重新设置state实现。

// React示例
const [formData, setFormData] = useState(initialState);

const handleReset = () => {
  setFormData(initialState);
};

动态表单重置

对于动态生成的表单字段，建议存储初始值副本，重置时恢复数据。

let initialValues = {};

// 初始化时保存默认值
document.querySelectorAll("input").forEach(input => {
  initialValues[input.name] = input.value;
});

// 重置函数
function resetForm() {
  Object.entries(initialValues).forEach(([name, value]) => {
    document.querySelector(`input[name="${name}"]`).value = value;
  });
}

文件输入重置

文件类型的输入需要特殊处理，直接修改value属性可能被浏览器安全策略阻止。

// 通过克隆替换元素实现文件输入重置
const fileInput = document.getElementById("fileInput");
const clone = fileInput.cloneNode(true);
fileInput.parentNode.replaceChild(clone, fileInput);