工作中的技术总结_ form表单使用注意事项之form触发后台提交事件 _20220127
工作中的技术总结_ form表单使用注意事项之form触发后台提交事件 _20220127
如无必要不要使用 form标签 来作为组件的父节点
事件过程:
项目使用的是 spring + jsp 的框架,根据业务需要添加了一个模块。由于项目中有既有的类似功能,选择进行迁移改写。但是 这一功能的原来是需要进行 form 表单提交的,而新加的模块只需要控件展示,不需要对 form表单进行提交,而是另外通过事件来获取并提交其中的 input 控件 value。
由于在迁移过程中 没有注意到该细节,导致 只要 input获得焦点 并 点击
Enter
键 就会触发表单事件,这时如果是 input中是 空值 就会报错已为此响应调用 getOutputStream () ……Constructs a InvocationTargetException with a target exception.
解决了这个问题,我没有第一时间 再现 bug 详细报错情况就不展示了。通过将 form标签 改成 div标签 就解决了以上问题,一般情况 这个 错误是 比较难发现的,但是 项目中要求 的是 改 input 控件的值 能够 通过键盘输入 也能够通过 下拉列表选择,使用下拉列表时不会报系统错误,而使用 键盘输入时,只要点击
Enter
键 就会导致系统错误,这才暴露了这个问题。一般,我们的使用习惯都是 输入之后 再点击
Enter
键 进行确认。所以不容许以上错误现象发生总之,如非必要,不使用 form标签 作为 展示信息的控件的 父节点,这一点很重要。
<!--引发错误的代码 只要将 form 替换为 div 就能解决-->
<form class="form-inline">
<div class="row" style="margin-bottom:5px;">
<div class="col-sm-8 col-xs-6" style="margin-top: 20px; margin-left: 20px;">
Start Date
<div class="input-group date form_date" data-date="" data-date-format="ddMyy" data-link-field="startDateShow"
data-link-format="yyyy-mm-dd" id=startDateDiv>
<input class="form-control input-sm" id="startDate" name="startDate" size="8" type="text" value="" spellcheck="false" maxlength="9">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</form>