悠悠楠杉
网站页面
JavaScript清空表单输入的3种高效方法
12/15
![]()
正文：
在实际开发中，我们经常需要保留表单结构的同时清空用户输入内容。例如，提交数据后重置表单，或实现“一键清除”功能。以下是三种无需操作DOM结构的解决方案：
方法一：遍历表单元素
通过querySelectorAll获取所有输入框并遍历赋值空字符串：
document.querySelectorAll('input, textarea').forEach(element => {
element.value = '';
});
此方法灵活可控，可针对特定容器（如#form-container）内的输入框操作。
方法二：调用表单的reset方法
若所有输入框都在<form>标签内，直接调用原生API：
document.getElementById('myForm').reset();
注意：此方法会将输入框还原到默认值（非空时需检查HTML中的value属性）。
方法三：事件委托动态清除
通过事件监听批量处理动态生成的输入框：
document.addEventListener('click', (e) => {
if (e.target.classList.contains('clear-btn')) {
const parentForm = e.target.closest('form');
Array.from(parentForm.elements).forEach(field => {
if (field.tagName === 'INPUT') field.value = '';
});
}
});
性能对比：
- 小规模表单：方法二最优（原生API性能最佳）
- 动态内容：方法三更可靠
- 非表单容器：方法一最通用
实际应用中，建议根据场景选择方案。例如电商网站的筛选条件清除，推荐结合方法一和方法三实现局部刷新，避免整体页面重载。
