按下回车默认提交form表单问题

Posted littleFatty

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了按下回车默认提交form表单问题相关的知识,希望对你有一定的参考价值。

最近开发中碰到一个问题,项目中有几个列表展示页面,允许用户通过查询条件模糊查询数据。用户录入关键字后点击回车会调用查询方法根据关键字查询,原先功能没有问题,但是最近发现在查询输入框中按下回车会直接刷新页面不调用查询方法。检查发现有人在查询模块新增了一个form表单,找了很多和form表单相关资料才发现当form表单内只有一个type=“text”类型的<input>标签时按下回车默认会提交form表单。解决方法很简单就是在form表单内新增一个隐藏的type="text"的<input>标签。

如下:

<form id="form3" method="post" enctype="multipart/form-data">
   <input type="text" style="display: none;"/>
</form>

 

以上是关于按下回车默认提交form表单问题的主要内容,如果未能解决你的问题,请参考以下文章

关于按下回车键自动提交表单问题解决

Vue 在按下回车键和使用验证观察器时阻止表单提交

阻止form元素内的input标签回车提交表单

form表单回车提交问题

form表单自动提交

解决Element表单回车提交会刷新页面的Bug