`
wsjiang
  • 浏览: 393941 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

点击reset按钮失效,不能清空输入框。

阅读更多

     最近做了毕业设计,其中遇到了很多问题。其中之一就是关于reset标签,以前做项目的时候也并没有过多的关注,甚至忽略掉了这个知识点。这次项目时间比较充分,我就细细的研究了一下,并进行综合整理,顺便分享出来,供初学者借鉴!

 

     使用<reset>标签,有时候我们会发现reset按钮失效,点击该按钮并不能清空输入框。

 

原因在此:

    w3c网站有这样的描述(http://www.w3school.com.cn/htmldom/dom_obj_reset.asp )"在 HTML 表单中 <input type="reset"> 标签每出现一次,一个Reset对象就会被创建。当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。"意思就是如果一个表单

项设置了value属性的值,那么点击reset按钮就会恢复此表单项到这个value属性的值,而不是空。

 

结论如下:

    reset并不是清空输入框的值,而是将输入框的值恢复到value属性所指定的值。


    看以下的例子就清楚了。将下面的HTML代码保存为一个.html文件,用浏览器打开,修改输入框的内容后,点击reset按钮,即可看到效果。

 

<form>
<input type="textarea" value="defaultValue"/>
<input type="reset" />
</form>

 

    但是查询的结果页面我们有时候又希望value属性是有值的(上次查询的输入条件),那么我们就不能使用reset标签来实现清空功能了。

    模拟的办法如下:使用button标签替代reset标签,利用js将该textarea的值置空。

 

分享到:
评论

相关推荐

    ASP.NET—017:ASP.NET中清空按钮的实现

    在Web表单中,这个按钮通常与HTML的`&lt;input type="reset"&gt;`元素关联,点击后,表单内的所有输入控件都会恢复到初始状态,即用户未进行任何输入时的状态。然而,在ASP.NET中,我们可以使用服务器端控件,如`Button`...

    微信小程序---提交表单后清空输入框

    最近有人问我提交表单后怎么把输入框的内容清空了。  这种方法不止一种, 1、可以用表单的重置功能。 按钮设置:   formType="reset"&gt;提交 form设置:   bindreset="formReset"&gt; 表单重置时会触发reset事件,在...

    HTML中的input type="reset"标签失效(不起作用)的可能原因。

    然而,有时候开发者可能会遇到`reset`按钮失效,即点击该按钮后输入框的值并未清除。这种问题通常是由于对`reset`按钮的工作原理理解不透彻导致的。让我们深入探讨这个问题。 首先,`&lt;input type="reset"&gt;`标签在...

    Bootstrap和jQuery实用重置输入框内容的按钮插件

    pureClearButton是一款基于Bootstrap的非常实用的用于清空和重置input输入框内容的jQuery按钮插件。当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可。

    中兴H618B刷Tomato DualWAN后Reset按钮功能

    ### 中兴H618B刷Tomato DualWAN固件后Reset按钮功能异常解决方案 在使用中兴H618B路由器时,部分用户可能会遇到一个常见的问题:即在将路由器刷成Tomato DualWAN固件后,Reset按钮的功能出现异常。此问题主要表现为...

    jQuery实现form表单reset按钮重置清空表单功能

    在jQuery中,可以通过调用`.trigger("click")`方法模拟点击事件,从而触发隐藏的reset按钮。这一操作会调用表单的默认重置行为,将表单内所有字段恢复到初始状态。 ### 知识点六:表单内input和textarea元素的清空 ...

    微信小程序清空输入框信息与实现屏幕往上滚动的示例代码

    这可以通过在发送按钮的点击事件中使用`form-type="reset"`来实现。在WXML(微信小程序的标记语言)中,我们可以设置一个表单(form)包含输入框和发送按钮: ```html 请输入内容" bindinput="bindInputData" /...

    清空默认样式reset.min.css

    清空默认样式reset.min.css

    swift-UITextfield输入框限制的功能封装

    此外,封装的类可能还包含了一些辅助方法,如`validateInput()`用于在提交时进行整体校验,`reset()`用于清空输入框,以及一些配置属性,如`allowNegativeNumber`(是否允许负数)、`maxLength`(最大长度)等,方便...

    ExtJs 带清空功能的日期组件

    在实际应用中,可能还需要根据项目需求对组件进行更复杂的定制,例如调整日期格式、添加日期限制或自定义清空按钮的外观等。通过深入理解ExtJs的组件体系和MVC模式,我们可以灵活地扩展和定制任何控件,以满足不同...

    清空表单标签js

    这里,'clearButton'是用于清空表单的按钮的ID,当用户点击这个按钮时,会调用`clearForm`函数,清空表单。 此外,`Demo.html`可能是一个包含了表单和清空功能的HTML文件,而`Js`和`Style`可能分别存放着与之相关的...

    layui 点击重置按钮, select 并没有被重置的解决方法

    如下所示: 点击重置时,输入框被重置为空,而账号 select元素并没有被重置。 // 重置事件 $("#reset").click(function () { $("#searchContent").val(""); $("#selectKey").val(""); form.render(); }) ...

    Trail-reset 试用信息清空

    "Trail-reset 试用信息清空"这个主题涉及到的是如何清除虚拟音频(VA)软件的试用信息,以便重新开始试用周期。这通常是通过修改注册表来实现的,因为注册表存储了软件安装和使用的关键信息。 首先,我们要理解...

    发现一个HTML按钮

    在这个例子中,用户可以输入他们的姓名和电子邮件,然后点击"重置"按钮,所有输入框的值都会被清空。 在实际开发中,为了提高用户体验和无障碍性,我们还应该考虑添加适当的`id`和`class`属性,以及使用`&lt;label&gt;`...

    layui清空,重置表单数据的实例

    3. 在请求成功或失败后,调用`form.reset()`清空表单字段。 4. 调用`layui.form.render()`更新表单视图,确保与实际状态同步。 这个过程不仅适用于商品发布,也可以应用到任何需要处理表单数据并重置表单的场景。在...

    JS 清空本页所有文本框

    通过上述分析可以看出,使用JavaScript自定义函数来清空页面上的文本框是一种实用且灵活的方法,尤其适用于那些不适合使用标准`reset`方法的场景。通过合理的代码设计和逻辑优化,可以使得该功能更加健壮、高效。

    html5 css3扁平化按钮点击加载动画特效

    通过设置`type`属性,如`type="submit"`或`type="reset"`,可以定义按钮的行为。 【CSS3动画】 CSS3的`@keyframes`规则允许创建复杂的动画效果。通过定义动画的开始和结束状态,以及过渡过程中的中间状态,可以...

    js清空表单数据的两种方式(遍历+reset)

    这种方法较为简便,只需要在页面中隐藏一个reset按钮,然后通过JavaScript触发该按钮的点击事件即可清空表单。 ```html &lt;!-- 用来清空表单数据 --&gt; &lt;input type="reset" name="reset" style="display:none;"/&gt; ``` ...

    ASP.Net中FileUpLoad控件内容清空

    当用户点击按钮触发事件时,可以利用JavaScript删除原有的`&lt;input type="file"&gt;`元素,并重新创建一个新的`&lt;input type="file"&gt;`元素来替代它,从而达到清空文件选择的效果。 示例代码如下: ```html ()"&gt; ...

Global site tag (gtag.js) - Google Analytics