通过回车进行提交表单,可以在用户输入完毕后直接进行回车查询操作,不用点击鼠标,在某些场景应用下非常方便,用户体验较好。
最近项目中遇到一个Input表单提交的问题,让我烦躁了半天,这里网上别人总结的,我粘贴下来,自己方便,也做一下普及。
原始网址:
http://hi.baidu.com/wangworks/blog/item/92c30d11f4d91b0c213f2e3e.html
总结&科普一下:
1、如果form里面只有一个input type=text,那么无论有没有submit按钮,在input中回车都会提交表单。如果不想回车提交,需要再加一个input type=text,然后设置display:none.
2、如果form里面多于一个input type=text,那么必须有一个submit按钮才可以回车提交表单。
按钮可以是input也可以是button,他们应设置type=submit。如果只写button而不写type,那么IE下type=button,FF下则是type=submit。
3、如果form里面多于一个input type=text,并想实现回车提交表单,又不想在页面中出现原生的submit按钮。比如:你想通过一个带hover的图片连接,并通过js脚本来实现华丽的验证及表单提交……
可以加上一个input type=submit 并设置display:none在form里——但是!这仅仅对FF等有效。在IE下就会非常悲剧……如果希望IE生效,需要做以下的事情:
<input type="submit" style="display:block;overflow:hidden;width:0px;height:0px;position:absolute">
还尝试了其他很多方法,均无效。比如:
将input的颜色、边框、背景都设置为#FFF,在IE下会出现恶心的焦点框……
设置input的透明度……
设置input的visablity……
将input移到页面外面可见区域之外……
将input藏在某个object下面……
还能在trick点么……
最后一个问题:
为什么非要费劲的用form的默认回车提交,而不在input中监听keydown事件,等到code=13时使用javascirpt调用form对象的submit()方法?
前提如果你的form targtet!=_blank,那么你可以实现你想要的。
但是一旦target=_blank,根据我的实践,在keydown事件中进行submit到_blank
—— 这个新窗口定会被IE给block掉……(顺便提一下,如果是在click事件里调用form的submit方法,无论是本窗口还是新窗口,在IE中都不会被block,怀疑是IE的防弹窗广告策略)
http://blog.csdn.net/jiabeis/article/details/5815943
分享到:
相关推荐
在实际开发中,考虑到不同浏览器的兼容性和用户习惯,开发者需要谨慎处理回车提交事件,确保功能的稳定性和用户体验的一致性。同时,利用源码分析工具,如提供的`submit.html`文件,可以帮助我们更深入地理解和调试...
本文将详细讲解如何禁止用户通过回车键来提交表单,以避免这种不必要的行为。 首先,我们要了解浏览器对表单的默认处理方式。在含有单个文本输入框的表单中,按下回车键会自动触发表单的提交。这是因为浏览器认为这...
JavaScript方法实现回车提交表单的基本步骤如下: 1. 给document对象绑定一个onkeydown事件处理函数。 2. 在事件处理函数中,获取触发事件的event对象。 3. 判断触发事件的键的keyCode值是否为13,即回车键的键码。 ...
这是因为默认情况下,回车键会被用来提交表单,这可能不符合某些交互设计的需求。本文将详细讲解如何通过JavaScript来防止回车键提交表单。 首先,我们可以使用JavaScript的事件监听方法来阻止回车键触发表单提交。...
如果表单中有多个`<input>`元素(包括隐藏的`<input>`),则浏览器不会在回车键被按下时自动提交表单。这是因为浏览器认为用户可能需要在其他输入框中输入数据,所以它等待用户完成所有输入后再提交表单。例如: ```...
在网页开发中,"网页 按ctrl+回车提交" 是一种常见的用户交互功能,它允许用户在填写表单后通过按下键盘上的Ctrl+Enter组合键来快速提交信息,而不是仅依赖于点击按钮。这一功能可以提升用户体验,特别是在处理大量...
然而,不同的浏览器对于回车提交表单的处理方式存在差异,这需要开发者充分理解并适配这些差异,以确保应用在各种环境下都能正常工作。 在IE和Firefox浏览器中,要使回车键能够提交表单,需要满足两个条件: 1. `...
这种默认行为导致了在实际开发中,开发者必须考虑到当表单设计为只有一个输入框,并且没有传统的提交按钮时,用户仍然可以通过按回车键来提交表单。但是,如果开发者不希望表单在按下回车时提交,可以通过添加额外的...
标题中的“JavaScript阻止回车提交表单的方法”是指使用JavaScript代码来防止用户按下回车键时触发表单的提交动作。这种技术对于确保用户在正确的时间提交表单,或者在提交前进行必要的验证是十分有用的。 描述中...
1. 回车键提交表单的默认行为: - 在大多数浏览器中,如果用户在一个文本输入框(input type="text")内按下回车键,并且表单中存在type为"submit"的按钮,那么表单将被提交。 - 如果表单内只有一个文本输入框,...
这种行为在某些情况下可能会导致意外的表单提交,例如在搜索界面中,用户可能期望回车键执行特定的查询逻辑,而不是直接提交表单。 在描述中提到的问题是,用户在输入框中输入汉字后按回车,输入框中的汉字变成了...
这样做虽然可以确保整个文档范围内禁止回车提交表单,但也可能会影响到其他需要使用回车键功能的场景(比如文本输入框的自动换行)。因此,在实际应用中,可能需要根据具体需求调整事件绑定范围,以减少不必要的影响...
总结一下,实现 jQuery 响应回车键提交表单的操作需要以下步骤: 1. 使用 `keyup` 或者 `keydown` 监听回车键事件。 2. 当检测到回车键被按下时,模拟点击提交按钮的 `click` 事件。 3. 确保监听事件在正确的元素上...
当检测到回车键被按下时,它会阻止默认的换行行为并提交表单。这种方法不仅适用于IE和Firefox,而且兼容所有支持`addEventListener`的现代浏览器,确保了广泛的适用性和一致性。 总之,通过合理利用HTML、CSS和...
"r键按钮提交表单代码"这个主题涉及到如何利用键盘快捷键,尤其是Ctrl+Enter和R键来触发表单的提交操作。这通常用于提高用户效率,让用户在不离开键盘的情况下也能方便地发送数据。下面我们将详细探讨这一技术。 ...
此外,如果你的应用场景中包含多个需要禁止回车提交的输入框,可以将这些输入框统一归类,比如都添加一个特定的类名,然后在一个事件监听器中处理所有的回车事件,这样能提高代码的复用性和可维护性。 总的来说,`...
总结来说,通过JavaScript(或者使用库如jQuery)监听键盘事件,检查回车键的按键码,并在检测到回车键被按下时触发表单的提交,可以在JSP中实现按下回车键自动提交表单的功能。这样,用户无需手动点击提交按钮,只...