form表单回车提交问题

在实际项目中，很多情况下，会需要敲击回车来提交表单，或触发js方法

 

比如搜索功能，为了让用户使用的方便流畅，需要做到用户输入关键字后，点击回车，直接提交进行搜索。

又比如用户注册功能，具有比较复杂的表单输入项，需要用户将表单输入完整后，方可点击提交。这就需要避免回车误提交。

 

但是html里面，有很多关于form回车提交的事件。这里整理了几种情况，做个记录：

 

1、form表单中，有一个submit，回车生效，例如：

 

<form>
     <input type="text" name="id" />
     <input type="text" name="code"/>
     <input type="submit" value="sub"/>
</form>

 

 

2、form表单中只有一个type=”text” 的input，无论按钮是什么，回车键生效，例如：

<form>
     <input type="text" name="keyword" />
</form>

 3、按钮不是input，而是button，并且没有指定type=“button”，IE下默认为type=button，火狐、chrome默认为type=“submit”，例如：

<!--这种写法，火狐、chrome等浏览器下，回车生效-->
<form>
     <input type="text" name="id" />
     <input type="text" name="code"/>
     <button>sub</button>
</form>

<!--这种写法，火狐、chrome等浏览器下，回车不生效-->
<form>
     <input type="text" name="id" />
     <input type="text" name="code"/>
     <button type="button">sub</button>
</form>

 4、type=”image”的input，等同于type=”submit”，考虑到日常用的应该不多，就不举例了。

 

 

综上所述，这些事件，虽然造就了一定的便利，但在不知情下，也会给表单或js的开发造成一定的困扰。

 

所以，开发时，简单的提交就用html自带的，方便快捷；复杂的，就需要尽量避免上面的情况，通过js提交，必要时，可以不用form标签画表单。

 

以上只是个人遇到的几种情况，欢迎补充。