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

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;"/>