`
LampJiang
  • 浏览: 1401 次
社区版块
存档分类
最新评论

form表单中只有一个input时按回车键将会自动将表单提交

 
阅读更多
出现自动提交的情况,有两种可能:
一是编写了javascript代码,当用户点按Enter键时,通过js事件侦听机制触发表单的提交。
二是利用了浏览器的默认行为(至少发现ie是这样的)。浏览器在解析网页的时候,有许多默认的行为,例如如果一个页面上有表单和一个提交按钮,那么打开页面时,焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单。
我们对于第一种情况一般都知道而且很容易理解,但是对于第二种浏览器的默认行为,可能知道这一点的人就比较少了,下面我具体看一下浏览器(至少ie如此)在表单提交上的默认行为。
如果表单中含有一个单行文本输入域,那么无论含有多少其他类型的表单组件,那么在该输入域中点击Enter时,表单会自动提交。例如下面的代码:

<form action="" method="post">
    <input type="text"name="sdfsdf"/>
    <textarea</textarea>
    <input type="checkbox"sdfsdf/>
    <input type="hidden"name="aa"/>
</form>

如果表单中含有两个或多个单行文本输入域,那么无论是否含有其他类型的表单组件,按Enter键时不会自动提交,例如:

<form action="" method="post">
    <input type="text"name="sdfsdf"/>
    <input type="text"name="sddf"/>
</form>

办法很简单,我们上面举的例子中已经有了,只要再添加一个文本输入框就可以了,可能你会说,为了不自动提交就要增加一个没有用的输入框,而且中含有两个输入框最终用户会接受吗?其实可以解决,你可以将那个新添加的输入框通过style隐藏即可,例如:

<form action="" method="post">
    <input type="text" name="notautosubmit" style="display:none"/>
    <input type="text" name="username"/>
</form>

还有一个方法可以绑定button按钮 enter触发事件:

document.onkeypress = function(){
    if(event.keyCode == 13) {
        search();returnfalse;
    }
}

其中search方法是onclick事件:

<form name="searchfrom"></form>

说明:文章是从别的地方看到的,觉着对自己有用就转载过来了,如有侵权,请联系本人,马上删除。
原地址:http://my.oschina.net/u/919074/blog/201821
分享到:
评论

相关推荐

    JSP中的FORM表单中只有一个input文本时,按回车键将会自动提交表单

    在JSP中,当一个FORM表单中只有一个INPUT文本输入框时,用户按下回车键,浏览器会默认触发表单的提交动作。这是因为浏览器的默认行为:在一个只有一个单行文本输入域(type="text")的表单里,按下回车键会模拟点击...

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

    1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个&lt;input type=”text” name=’name’ /&gt;时按回车键将会自动将表单提交。 &lt;form id='form1' action='a1.jsp' method='post'&gt...

    如何防止INPUT按回车自动提交表单FORM

    如果表单中有多个`&lt;input&gt;`元素(包括隐藏的`&lt;input&gt;`),则浏览器不会在回车键被按下时自动提交表单。这是因为浏览器认为用户可能需要在其他输入框中输入数据,所以它等待用户完成所有输入后再提交表单。例如: ```...

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

    回车键触发表单提交是一个常见的功能,但有时它可能会带来一些问题或需要进行特定的处理。本文将深入探讨回车键如何触发表单提交,以及在实际应用中可能遇到的相关知识点。 首先,我们需要理解HTML表单的基本结构。...

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

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

    禁止按回车键提交表单的方法

    在网页开发中,用户按下回车键通常会触发表单的提交操作,这在某些情况下可能会导致意外的结果,比如在搜索框中按回车可能会刷新整个页面。本文将详细讲解如何禁止用户通过回车键来提交表单,以避免这种不必要的行为...

    没有form表单情况下敲回车键提交表单的js代码.docx

    ### 没有form表单情况下敲回车键提交表单的JS代码 在Web开发中,表单是用户与网站交互的重要方式之一。通常情况下,表单通过`&lt;form&gt;`标签来定义,并且可以通过点击按钮或者按下回车键来提交表单数据。但在某些特殊...

    jsp中如何实现按下回车键自动提交表单.docx

    在Web开发中,为了提升用户体验,有时我们需要实现在用户按下回车键时自动提交表单的功能。这对于登录页面、搜索框等场景非常实用。本文将详细介绍如何在JSP环境中实现这一功能。 #### 实现原理 实现此功能主要依赖...

    jsp中如何实现按下回车键自动提交表单

    要实现回车键自动提交表单,我们可以添加一个JavaScript函数,该函数监听键盘事件,并在检测到回车键被按下时模拟点击提交按钮。这里的关键在于捕获键盘事件(`keydown`或`keyup`)并检查其按键码(keyCode)。回车...

    如何防止回车(enter)键提交表单

    在网页设计中,有时我们希望用户在填写表单时,按下回车键(Enter)不会立即触发表单的提交操作,而是执行其他行为或者不做任何处理。这是因为默认情况下,回车键会被用来提交表单,这可能不符合某些交互设计的需求。...

    按回车表单自动提交问题意外发现

    这样,即使表单中只有一个可见的输入框,按下回车键时,浏览器会识别到还有其他表单控件存在,因此不会触发表单的自动提交行为。 最后,需要注意的是,在一些表单设计中,可能会使用JavaScript来控制表单的提交过程...

    ie ,火狐 文本框回车自动提交

    在网页开发过程中,一个常见的需求是当用户在文本框中按下回车键时,自动触发表单提交。这种功能在多种浏览器中实现的方式可能有所不同,尤其是对于IE(Internet Explorer)和Firefox这两种主流浏览器。本文将深入...

    r键按钮提交表单代码.rar_r键按钮提交表单代码

    至于压缩包中的文件"jiaoben2761",根据其名称推测可能是一个代码样本或者教程文档,具体内容未知,但应该与上述讨论的快捷键提交表单的实现有关。如果需要进一步的帮助,可以查看该文件以获取更详细的代码实现和...

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

    时按回车键将会自动将表单提交。 代码如下: &lt;form id=”form1″ action=”post.php” method=”post”&gt;   &lt;input type=”text” name=”name” /&gt;  &lt;/form&gt;  再添加一个 代码如下: &lt;...

    javascript 按回车键相应按钮提交事件.docx

    然而,在实际应用中可能会遇到这样一个需求:当用户完成表单填写后,希望可以通过直接按回车键来触发按钮的点击事件,从而执行表单验证并提交表单。 #### 二、传统方法概述 传统的表单提交方法有两种: 1. **使用...

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

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

Global site tag (gtag.js) - Google Analytics