`
jiangchuhan
  • 浏览: 17067 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

这个问题是由测试中发现的一个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方法了。

分享到:
评论

相关推荐

    页面只有一个text的时候,回车自动submit的解决方法

    总结来说,解决“页面只有一个text时,回车自动submit”的问题,可以尝试通过监听键盘事件、阻止默认事件或添加隐藏文本输入框的方式实现。在实际开发中,应根据浏览器兼容性和项目需求选择最合适的方案。

    按回车键提交表单~~~~~

    在Web开发中,我们经常需要为用户提供更友好的交互体验,其中一个常见的需求就是允许用户通过按下回车键来提交表单。这种方法可以提高用户体验,并且在很多场景下是非常实用的。 #### 代码解析: ```javascript ...

    网页中表单按回车就自动提交的问题的解决方案

    在网页设计中,表单是用户与服务器交互的重要组成部分,其中的一个常见问题是在表单内按下回车键会自动触发表单的提交。这在某些情况下可能会带来不便,例如用户可能意外地提前提交了未完成的表单。本文将详细讨论这...

    Form表单按回车自动提交表单的实现方法

    首先,当一个`<form>`表单中只有一个`<input type="text">`标签时,按下回车键会自动触发表单的提交。这是因为浏览器的默认行为,它将回车键视为提交表单的信号。如果不想让表单在按回车时自动提交,可以采取以下两...

    点击回车提交表单,应用Java技术实现。

    在这个例子中,我们利用JavaScript来监听键盘事件,并在用户按下Enter键时自动提交表单。 ```javascript document.onkeydown = function (evt) { var evt = window.event ? window.event : evt; // 兼容IE和其他...

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

    如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。 其他表单元素如textarea、select...

    jquery禁止回车触发表单提交

    在网页开发中,用户在文本框中按下回车键通常会导致表单的自动提交,这在某些情况下可能不是我们期望的行为。例如,在一个搜索框中,如果用户按下回车,我们可能希望阻止默认的表单提交,而是执行自定义的查询逻辑。...

    Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法

    1. 监听键盘按下事件:首先需要在文档上绑定一个键盘按下事件,这样每当用户按下键盘上的任何一个键时,都会触发这个事件处理函数。在这里使用了`document.onkeydown`来实现。 2. 捕获Enter键:在事件处理函数中,...

    常用限制input的方法

    如果希望用户在按下回车键后不是立即提交表单,而是切换到下一个输入框,可以通过监听键盘事件实现这一功能。例如: ```html <input type="text" onkeydown="if (event.keyCode == 13) event.keyCode = 9;" /> ``` ...

    JAVASCRIPT验证大全

    - 在表单填写过程中,用户按下回车键时自动跳转到下一个表单项。 - 提升用户体验,减少鼠标操作。 **注意事项:** - `IsFireFox`变量用于判断当前浏览器是否为Firefox,以便适配不同的事件处理方式。 - 只有当...

    html入门到放弃笔记

    在一行内允许显示多个元素的,称为 "行内元素" span,i,b,s,u,sup,sub 作用:包裹文本,并处理文本的表现形式 2、块级元素 每个元素独占一行显示的,称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用:布局 ...

    03HTML基础.pdf

    它们通常需要name属性来保证同一组元素中只有一个被选中。 八、其他知识点 - HTML文档中,回车和换行并不直接被识别,需要使用特殊的标签或实体(比如 表示换行)。 - 为了更好地适应不同浏览器,编码声明是必须...

    js阻止默认浏览器行为与冒泡行为的实现代码

    1. 表单提交:在用户按下回车键时,若表单中的按钮类型为`type="submit"`,浏览器会自动提交表单。为了避免这种情况,可以在文本框的`onkeydown`事件中检测回车键(keyCode为13),并阻止默认的表单提交行为,然后...

    Selenium元素的常用操作方法分析

    Selenium是一个广泛应用于Web应用程序测试的自动化工具,它能够模拟真实用户的操作在不同的浏览器环境中执行测试脚本。Selenium支持多种主流浏览器,包括但不限于IE、Firefox、Safari、Chrome和Opera等。它主要的...

    javascript的键盘控制事件说明

    最后,我们来看一个更复杂的例子——使用键盘移动页面上的对象。这个例子会根据用户按下不同的键来调整对象的位置。 ```javascript function init() { if (ns4) block = document.blockDiv; if (ie4) block = ...

    60个实用的jQuery代码片段.pdf

    【jQuery基础】jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。以下是从60个实用jQuery代码片段中提取的知识点: 1. **选择器与过滤**:`filter()`方法允许根据指定条件筛选元素...

    js使用小技巧

    ENTER键可以让光标移到下一个输入框 (event.keyCode==13)event.keyCode=9"> 文本框的默认值 <input type=text value="123" onfocus="alert(this.defaultValue)"> title换行 obj.title = "123&#13sdfs&#32" ...

Global site tag (gtag.js) - Google Analytics