说说回车键触发表单提交的问题

我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
1、如果表单里有一个type=”submit”的按钮，回车键生效。

2、如果表单里只有一个type=”text”的input，回车键生效。

3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。

4、其他表单元素如textarea、select不影响。

实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办 呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第3条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。

转自：http://ued.koubei.com/?p=835

 

 

ps:一般解法

如果觉得这些规则很难记住，那么可以使用javascript监控enter键的做法，在document中监控keydown事件，判断是否enter已按，因为任何事件最终都会传播到document为止。

 

ps2:submit()与jquery

由于dom节点的submit()方法并不会调用我们监听submit的处理器，而如果使用jquery的话则会非常方便，由于jquery的事件触发操作实际上是重新实现，不依赖于浏览器，则

 

$("form").submit(function(){alert(1);});
$("form").submit();

 

会弹出alert(1);

ps3:resize 浏览器区别

reize 事件触发个个浏览器表现不同，ie在resize过程中持续触发，firefox只在resize结束后触发一次。

 

 

评论

1 楼 yiminghe 2009-02-15  

一般使用 a 模拟 按钮的话 ，在当前form加个

<input class="hiddenSubmit" type="submit"/>

.hiddenSubmit {
  position:absolute;
  top:-9999px;
}

ff,ie compatible