from表单的重置按钮(reset)不能重置隐藏input框的值

最新推荐文章于 2022-08-08 09:29:02 发布
最新推荐文章于 2022-08-08 09:29:02 发布
阅读量2.1k 收藏 1
点赞数 7
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hangchen1025/article/details/107025038
本文探讨了HTML中重置按钮在特定情况下无法清除所有输入字段值的问题，并提供了一个简单有效的解决方案：通过隐藏一个文本输入框并将其与重置按钮结合使用，确保所有表单字段都能被正确重置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

代码

<form >
	<input type="hidden"/>
	<input type="reset" value="重置"/
</form>

当input框有值,比如通过js赋值,点击重置,值依然存在,所以可以将代码改成这样

<form >
	<input type="text" style="display:none;"/>
	<input type="reset" value="重置"/
</form>

即,给input加样式隐藏

hangchen1025
关注
Form表单的重置按钮(type=“reset“)无法重置隐藏Input输入框的值
可达鸭给我冲鸭
09-15 2053
Form表单的重置按钮(type=“reset”)无法重置隐藏Input输入框的值 前端使用的Layui、在搜索表单处因为需要设置两个隐藏输入框来存储时间范围，但是发现使用重置按钮无法重置两个隐藏输入框的值，再此整理下解决办法。 问题代码 <div class="layui-inline"> <label class="layui-form-label">开学时间</label> <div class="layui-input-inline">
表单reset无法重置hidden的解决方案
逆风的蔷薇
09-17 1116
方法一：用text代替hidden，设置text隐藏 <input id="id" name="id" style="display: none;" value="0" /> 方法二：单独处理hidden类型 jQuery("#saveForm").form("reset"); jQuery("input[type='hidden']").val("");
关于form表单的reset功能无法还原hidden中的值
weixin_34026276的博客
07-10 487
reset的功能是将输入项的值赋值为form中的值，也就是说如果form中有值的话，那么即使点击reset按钮也不会将输入项清空，而是会将其赋值为form中的值。根据上面的说明，我理解后如下：只有能键盘输入，鼠标点击修改值的控件【即除hidden意外的输入控件】才能使reset还原为初始化的值，哪怕隐藏了的输入控件。 转载于:https://blog.51cto....
类型为hidden的input,其里面的值无法reset
aaawyh的专栏
06-26 993
请选择     男     女 function a(s){ $("#like_sex").val(s); }
jquery.form.js的重置表单增加hidden重置代码
weixin_30291791的博客
09-12 241
jquery.form.js的resetForm()方法无法重置hidden元素，打开文件在1460行加上以下代码即可 转载于:https://www.cnblogs.com/taiyonghai/p/7511056.html
如何使用图片按钮作为重置(reset)表单按钮
09-28
本篇文章将详细介绍如何使用图片按钮作为重置(reset)表单的功能。 首先，我们需要了解HTML中的`<input>`元素，它允许我们创建各种类型的用户输入控件，包括按钮。当`type`属性设置为`image`时，`<input>`元素会显示...
jQuery实现form表单reset按钮重置清空表单功能
12-12
有时候可能需要实现这样的效果：使用ajax提交表单，成功提交表单之后清空表单，如下代码： 代码如下: <form> <input name=”name1″ /> <input name=”name1″ /> <textarea name=”...
使用jQuery重置(reset)表单的方法
11-30
`，我们会发现这并不工作，因为jQuery本身并没有提供一个直接的`.reset()`方法来重置表单。这是由于`.reset()`实际上是HTML DOM元素的一个原生方法，而不是jQuery对象的方法。 那么，如何在jQuery中正确地重置表单...
jQuery操作表单一直没法重置
Renyu195的博客
11-03 231
jQuery操作表单一直没法重置 由于 jquery 没有 reset( ) 方法，需要先转换成DOM对象 // 重置表单 $("#formReset").click(function(){ // 错误的 // $("#addFrom").reset(); // 原生DOM操作 //document.getElementById("addFrom").reset(); // 转DOM，再重置 $("#addFrom")[0].reset();
jquery实现from表单重置
qq_44537625的博客
07-31 632
jquery中没有rest（）方法，只有调用dom中的rest方法才能进行重置 $('#yigeform').reset()//这样是不行的 $('#yigeform')[0].reset()//正确的方法
VUE-From表单校验重置
yang516114852的博客
02-14 2497
1.描述： 表单校验后 点击取消或者关闭，再次打开，校验提示语不消失。 需要在点击打开表单弹窗或者关闭弹窗是对表单进行重置 2.方法： this.$refs.taskform.resetFields() 我是在关闭的时候调用的，（由于自己的是子组件，点击新增时进行表单重置会有参数找不到的问题） 由于应用场景不同，如果你自己的Form弹窗中关闭弹窗和取消按钮不是一个方法要再两个方法中都加入重置表单方法。 ...
view Ui 里的from表单重置问题 this.$refs.form.resetFields
weixin_56115652的博客
08-08 1378
view ui 组件中,from表单提交 resetField方法
Form Reset Function
清箫的专栏
06-05 5902
Reset按钮，这个在现在的项目中几乎已经不用了，因为用户很容易点击到reset按钮，从而使自己陷入懊恼，不得不重新填表单。不过form.reset()在通过Ajax提交请求的页面中，还是有人使用。比如成功提交之后，ajax表单应该被重置，这样下次重新显示表单时，表单是空的或还原为原始值。 很可惜，form.reset()浏览器不兼容，不同的浏览器在实现reset时，使用了不同的策略。FF在
表单重置时，type="hidden"的input元素不能被重置
mask-fish
01-19 1056
<input type="hidden" name="userId" id="userId"> 如上：当表单重置时，隐藏域（type="hidden"）不可被重置； 可以换一种方法对其进行隐藏，如下： <input type="text" name="userId" id="userId" style="display:none;"> 设置其样式为：displa...
【Bug】表单中的重置按钮对隐藏域无效
不务正业的野猴子
04-14 1183
表单中的重置按钮对隐藏域无效 测试反馈列表查询处的重置按钮有bug，第一反应是重置按钮写的时候已经测试过了，怎么会有问题呢？但测试提了，咱也的检查一遍，结果还真有问题。。。 代码如下： &amp;lt;form name=&quot;listForm&quot;&amp;gt; &amp;lt;div class=&quot;text-l cl&quot;&amp;gt; &amp;lt;
form表单重置时，让某一个input值不变
sunshine_xtt的博客
09-30 2370
想让表单重置时某一个input值保持不变，只要给reset按钮添加一个点击事件，在执行 reset() 方法之前修改它的 defaultValue 属性，将它当前的值设为初始值就可以了。 <input type="text" id="mcName" name="mcName" class="layui-input mcName" lay-verify="" readonly> ...
form表单重置、清空方法记录
weixin_30508241的博客
10-26 7183
myform 是form的id属性值 1.调用reset（）方法 1 function fomrReset() 2 { 3 document.getElementById("myform").reset(); 4 } 2. 逐个清空input、select值 1 function resetAll() { 2 $("#myform").find('...
form.reset() 的真正作用，并不是清空所有输入栏
学习笔记
03-11 8318
form.reset() 的真正作用，并不是清空所有输入栏 form 有个方法是 reset()，作用不是清空 &lt;form&gt; 标签中的所有输入栏，而是回到上一次载入页面时的状态。 看例子： &lt;form id="input-form"&gt; &lt;input type="text"&gt; &lt;input type="text"&gt;
Thymeleaf查询表单了，然后点击重置按钮不生效
最新发布
01-23
### Thymeleaf 表单重置按钮不生效解决方案 在HTML表单中，`<input type="reset">` 或 `<button type="reset">` 应该能够清除表单中的所有输入字段至其初始状态。然而，在使用Thymeleaf时可能会遇到重置按钮无法正常工作的情况。 #### HTML标准行为 按照HTML的标准定义，重置按钮会将表单恢复到加载页面时的状态。如果表单数据是在客户端通过JavaScript动态设置的，则这些更改不会被重置操作影响[^1]。 #### Thymeleaf上下文中可能的原因及解决方法 ##### 服务器端预填充的数据 当表单由Thymeleaf从服务器端预先填充时（例如编辑现有记录），浏览器认为这是默认值的一部分，因此点击重置按钮并不会改变它们。为了使重置功能有效，可以在每次加载含有预填内容的页面之前先清空模型属性或确保表单元素具有明确的初始值[^2]。 ```html <form th:action="@{/submit}" method="post"> <!-- 确保有明确的初始值 --> <input name="username" value="" /> <input type="password" name="password"/> <button type="reset">Reset</button> </form> ``` ##### JavaScript干扰 如果有任何JavaScript脚本修改了表单内的控件值，那么即使存在有效的重置按钮也可能表现异常。建议检查是否有这样的脚本运行，并考虑调整逻辑以兼容重置动作[^3]。 ##### 浏览器缓存问题 有时浏览器会对某些类型的输入框启用自动完成特性，这可能导致看似重置失败的现象。可以通过禁用特定字段上的自动完成功能来尝试解决问题： ```html <input autocomplete="off" .../> ``` 另外一种方式是利用CSS样式隐藏原生重置按钮并自定义一个替代品，配合JavaScript实现更复杂的交互效果，比如确认对话框等额外的功能增强[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值