这个问题是由测试中发现的一个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”的问题,可以尝试通过监听键盘事件、阻止默认事件或添加隐藏文本输入框的方式实现。在实际开发中,应根据浏览器兼容性和项目需求选择最合适的方案。
在Web开发中,我们经常需要为用户提供更友好的交互体验,其中一个常见的需求就是允许用户通过按下回车键来提交表单。这种方法可以提高用户体验,并且在很多场景下是非常实用的。 #### 代码解析: ```javascript ...
在网页设计中,表单是用户与服务器交互的重要组成部分,其中的一个常见问题是在表单内按下回车键会自动触发表单的提交。这在某些情况下可能会带来不便,例如用户可能意外地提前提交了未完成的表单。本文将详细讨论这...
首先,当一个`<form>`表单中只有一个`<input type="text">`标签时,按下回车键会自动触发表单的提交。这是因为浏览器的默认行为,它将回车键视为提交表单的信号。如果不想让表单在按回车时自动提交,可以采取以下两...
在这个例子中,我们利用JavaScript来监听键盘事件,并在用户按下Enter键时自动提交表单。 ```javascript document.onkeydown = function (evt) { var evt = window.event ? window.event : evt; // 兼容IE和其他...
如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。 其他表单元素如textarea、select...
在网页开发中,用户在文本框中按下回车键通常会导致表单的自动提交,这在某些情况下可能不是我们期望的行为。例如,在一个搜索框中,如果用户按下回车,我们可能希望阻止默认的表单提交,而是执行自定义的查询逻辑。...
1. 监听键盘按下事件:首先需要在文档上绑定一个键盘按下事件,这样每当用户按下键盘上的任何一个键时,都会触发这个事件处理函数。在这里使用了`document.onkeydown`来实现。 2. 捕获Enter键:在事件处理函数中,...
如果希望用户在按下回车键后不是立即提交表单,而是切换到下一个输入框,可以通过监听键盘事件实现这一功能。例如: ```html <input type="text" onkeydown="if (event.keyCode == 13) event.keyCode = 9;" /> ``` ...
- 在表单填写过程中,用户按下回车键时自动跳转到下一个表单项。 - 提升用户体验,减少鼠标操作。 **注意事项:** - `IsFireFox`变量用于判断当前浏览器是否为Firefox,以便适配不同的事件处理方式。 - 只有当...
在一行内允许显示多个元素的,称为 "行内元素" span,i,b,s,u,sup,sub 作用:包裹文本,并处理文本的表现形式 2、块级元素 每个元素独占一行显示的,称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用:布局 ...
它们通常需要name属性来保证同一组元素中只有一个被选中。 八、其他知识点 - HTML文档中,回车和换行并不直接被识别,需要使用特殊的标签或实体(比如 表示换行)。 - 为了更好地适应不同浏览器,编码声明是必须...
1. 表单提交:在用户按下回车键时,若表单中的按钮类型为`type="submit"`,浏览器会自动提交表单。为了避免这种情况,可以在文本框的`onkeydown`事件中检测回车键(keyCode为13),并阻止默认的表单提交行为,然后...
Selenium是一个广泛应用于Web应用程序测试的自动化工具,它能够模拟真实用户的操作在不同的浏览器环境中执行测试脚本。Selenium支持多种主流浏览器,包括但不限于IE、Firefox、Safari、Chrome和Opera等。它主要的...
最后,我们来看一个更复杂的例子——使用键盘移动页面上的对象。这个例子会根据用户按下不同的键来调整对象的位置。 ```javascript function init() { if (ns4) block = document.blockDiv; if (ie4) block = ...
【jQuery基础】jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。以下是从60个实用jQuery代码片段中提取的知识点: 1. **选择器与过滤**:`filter()`方法允许根据指定条件筛选元素...
ENTER键可以让光标移到下一个输入框 (event.keyCode==13)event.keyCode=9"> 文本框的默认值 <input type=text value="123" onfocus="alert(this.defaultValue)"> title换行 obj.title = "123
sdfs " ...