在编写网页的时候,突然发现有一个页面的查询表单中重置按钮不起作用了。1.说明:输入表单内容,不点击查询按钮,直接重置按钮,是可以清空重置表单内容的;输入表单内容,点击查询按钮,再点击重置按钮,发现重置按钮无效,只能重置到之前输入的内容;2.原因分析及解决办法:查了一下w3c的标准文档,其中给的解释说是因为,type="reset"的input标签,点击后只是重置到默认值,这就很好解释了为什么不点击查询按钮可以重置表单数据为空,而在点击了查询(submit类型)按钮之后,表单各数据内容就等于有值了,所以点击重置不能达到预期重置表单数据为空的目的。所以,最后只能这样做,自己编写js绑定事件手动重置表单数据为空,看代码如下:// 首先在reset按钮上加一个样式:btn-reset<button class="btn-reset" type="reset">重 置</button>// 为 btn-reset 样式的重置按钮绑定鼠标点击事件<script>$(function(){$('.btn-reset').onclick(function(){$('#name').val('');$('#category').val('');});})</script>
1200字范文,内容丰富有趣,写作的好帮手!