关于chrome下input中Enter的keydown事件会自动提交form的疑问与解决

当页面有<form>操作时，浏览器会有默认的响应enter键就提交form表单。

看html代码

  <form action="http://www.7k7k.com">
  <input type="text">

当你在input框里输入后，按enter键，就会默认提交form,

但实际需求并不是这样的，比如在input输入时会有弹出的suggestion选项让用户选择，用户按了enter键后并不想直接提交，所以需要在部分逻辑下需要取消这种默认响应。

解决方法非常简单，如下

document.onkeydown = function(e) {
    var e = e || event;
    if(e.keyCode == 13) {
        alert("自己的逻辑");
        e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    }
}

这段代码在ie下是通过了，

但在firefox,chrome下按enter键，先会alert("自己的逻辑")，再又接着执行默认的form提交，当时花了很多时间，一直以为是取消默认事件哪里写错了，后面不经意将alert("")换成了,console.log,在firefox和chrome下就通过了。即执行了console.log后，便不再执行默认的提交了，

这里就奇怪了，为什么在中间alert就不行，ie下的alert与firefox,chrome的alert有什么不同呢？应该都是阻塞式的。

我又针对问题测了很久，发现之前的怀疑是错误的，alert肯定都是阻塞的，唯一的原因是ie系列下onkeydown与onsubmit是同步的，所以它按照了我所想的逻辑执行，而

firefox,chrome下的onkeydown与onsubmit是异步的，故在alert("")阻挡了onkeydown,但onsubmit()还会继续执行。

所以我们将代码改了下，在firefox,chrome下就ＯＫ了

document.onkeydown = function(e) {
    var e = e || event;
    if(e.keyCode == 13) {
　 　 setTimeout(function(){
            alert("自己的逻辑");
        },0);
        e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    }
}

 

代码到这里，大家应该就明白了，javascript的函数调用也是堆栈的，setTimeout可以将函数从堆栈里出来，所以也就解决了异步的问题。

 

问题解决到这里，得总结一下

一 ie下与firefox,chrome在处理onkeydown与onbsubmit机制不一样， ie是同步的，而firefox,chrome是异步的，通过一个阻塞的alert(1)就可以说明这个问题。

二 当想改变一个函数执行顺序时，包括一些浏览器自身的默认顺序时，可以通过setTimeout来改变函数在本来堆栈的顺序。