form表单input框回车自动提交问题

前几天在做项目的时候发现一个奇怪的问题,在选中input输入框后敲回车会刷新页面。我仔细看了一下,发现是把from表单自动提交了。

可是为什么会自动提交呢?

问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容。我怀疑是form表单的一个坑。

解决方法:

解决方法大致有三种:

第一种:在from表单中添加一个无用的隐藏的input输入框。也是最简单,最实用的一种。
<input type="text" style="display:none;"/>
第二种:把input输入框的回车给禁用掉。我觉得是比较绝的一种方式,不太推荐使用。
<input type="text"  onkeydown="return disabledKeyDown(event)" />
function disabledKeyDown(e) {
    if (e.keyCode == 13) {
        return false;
    }
}
第三种:利用return false阻止form表单提交。
<input type="text" onSubmit="return oneFunc()"/>
function oneFunc(){
	// do something...
	return false;
}

或者

<input type="text" onSubmit="oneFunc();return false;"/>
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐