JavaScript清空Form表单内容的完整实现方案
作者:青柠时间:2026-10-28 11:03:32浏览:648
本文提供了一段JavaScript代码,用于清空HTML表单中所有元素的内容。该函数通过遍历表单元素,针对文本框、密码框、单选按钮、复选框、下拉列表及文件上传控件等不同类型,执行相应的重置逻辑,包括清空值、取消选中或重置选项状态,确保表单恢复到初始空白状态。
代码复制结束标记。
JavaScript清空Form表单内容方法详解与代码示例
具体实现代码如下所示:
首先定义清空表单的选择逻辑。
定义一个名为 clearForm 的函数,接收表单ID作为参数。
函数开始,通过 document.getElementById 获取指定ID的表单对象。
检查获取到的表单对象是否为 undefined。
如果表单对象不存在,则直接返回,终止执行。
}
若表单存在,则遍历表单内的所有元素,索引从 0 到 elements.length。
判断当前元素的 type 属性是否为 "text"。
如果是文本框,将其 value 属性设置为空字符串。
}
否则,判断当前元素的 type 属性是否为 "password"。
如果是密码框,将其 value 属性设置为空字符串。
}
否则,判断当前元素的 type 属性是否为 "radio"。
如果是单选按钮,将其 checked 属性设置为 false,取消选中状态。
}
否则,判断当前元素的 type 属性是否为 "checkbox"。
如果是复选框,将其 checked 属性设置为 false,取消选中状态。
}
否则,判断当前元素的 type 属性是否为 "select-one"。
如果是单选下拉列表,将 options[0] 设置为 selected,选中第一项。
}
否则,判断当前元素的 type 属性是否为 "select-multiple"。
如果是多选下拉列表,则遍历其所有 options,索引从 0 到 options.length。
将每个 option 的 selected 属性设置为 false,取消所有选中。
}
}
否则,判断当前元素的 type 属性是否为 "file"。
注释掉 formObj.elements[i].select(); 这行代码。
注释掉 document.selection.clear(); 这行代码。
注释说明这些代码适用于 IE, Opera, Safari, Chrome 等浏览器。
定义变量 file 指向当前表单元素。
检查 file.outerHTML 是否存在。
如果 outerHTML 存在,将 file.outerHTML 重新赋值为自身,以重置文件输入框。
否则,执行 else 分支。
将 file.value 设置为空字符串,适用于 Firefox(包括 3.5 版本)。
}
}
否则,判断当前元素的 type 属性是否为 "textarea"。
如果是文本域,将其 value 属性设置为空字符串。
}
}
} 作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
