现在的位置: 首页 > 综合 > 正文

在 IE下,页面只有一个text的时候,回车将自动submit的问题

2018年08月28日 ⁄ 综合 ⁄ 共 1243字 ⁄ 字号 评论关闭

这个问题是由测试中发现的一个Bug引出来的。

Bug具体描述如下:

在输入框中输入内容,按回车键,默认焦点聚焦在入口菜单上。

如果开始点击'查询'按钮,以后再输入条件,然后回车的话,焦点定位是没问题的。

 

经查,之所以引起这个Bug,实际上是因为页面上只有一个input type="text",后来google了一下,发现了《在 IE下,页面只有一个text的时候,回车将自动submit》这篇文章,原来当只有一个text框时,按回车会自动提交。该文同时还提到“即使在这个页面中增加file,checkbox,hidden等的控件,这个页面还是会自动提交。这是IE的一个缺省操作。如果想改变这个缺省操作,可以再增加一个text,然后隐藏这个text”。注意,这里的隐藏是指必须是增加一个input type="text",然后将它隐藏,而不是使用input type="hidden",因为使用hidden没有用,还是会提交。

 

于是,开始寻找解决方法。首先,隐藏text,这个方法有点取巧,所以先不考虑。接下来就需要再想别的办法。于是我尝试了给那个唯一的text增加onkeydown方法,如下:

function enterDown(evt){

    var evt = window.event?window.event:evt;
    if(evt.keyCode==13)
    {
          //validate and submit
    }

}

可是不管onkeydown方法如何返回,页面总是会提交。而且,提交的时候还有一个现象就是,它总是以上一次执行过的action来提交(注:FORM里面没有指定action,而是在js里面执行的form.submit)。因此,当第一次进入界面时,是通过一个action1进来的,这时按回车,它总是提交这个action1,当点击了“查询”按钮后,执行了另一个action2,以后再按回车,就会提交action2。这个现象太让人发指了,因为它自动提交的时候会直接执行form.submit,从而绕开你的validate方法。这时,我试着将onkeydown方法中的"validate and submit"改成了"document.all.querybtn.focus();",问题竟然解决了。这种情况下,它的行为变成执行querybtn所指定的onclick方法了。说实话,虽然解决了问题,但真不知道为什么会这样,这就要问IE了。

 

类似的,还有一个界面,上面也是只有一个input type="text",但是这个text添加了一个日期控件,这时现象又不一样了。当第一次进入界面时,是通过一个action1进来的,这时按回车,它总是提交这个action1,当点击了“查询”按钮后,执行了另一个
action2,以后再按回车,页面不自动提交了。虽然现象不一样,但用上面的方法还是可以解决。就是当焦点设置到某个按钮上时,它的行为变成执行querybtn所指定的onclick方法了。

抱歉!评论已关闭.