`
yuanyuan7891
  • 浏览: 167065 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

form表单回车提交问题(转)

 
阅读更多
我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则:

   1. 如果表单里有一个type=”submit”的按钮,回车键生效。
   2. 如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。
   3. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。
   4. 其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。
   5. type=”image”的input,效果等同于type=”submit”,不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。

6.我们在处理表单的页面可以检验他是否点击了按钮来控制下面的程序。if($_POST['submit']){ 如果点击了按钮 程序继续}

实际应用的时候,要让表单响应回车键很容易,保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢?我的方法有点别扭,就是再写一个无意义的文本框,隐藏起来。根据第3条规则,我们在用button的时候,尽量显式声明type以使浏览器表现一致。


通过以上可知只要把type="submit"改成type="button"然后js提交, 在不要有一个type=”text”的input就行了。就不会发生回车跳转。
但实验发现,ie和火狐不一样,火狐的submit按钮有掩藏的(display:block)和显现的都不行,必须全改,但ie只要显现的没有submit就行了。
<form id="form1">
请输入关键字:
<input style="display: none" />
<input type="text"
onkeypress="if(event.keyCode==13){goToSearchList();}"/>

<input type="button" value="搜索" onclick="goToSearchList();" />
</form>
分享到:
评论

相关推荐

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

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

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

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

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

    本文将详细介绍如何防止`&lt;input&gt;`按回车键自动提交`&lt;form&gt;`表单。 首先,我们来看一下问题的示例代码: ```html &lt;!doctype html&gt; &lt;title&gt;test &lt;form action="http://blog.csdn.net/gnail_oug" method="post"&gt; ...

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

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

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

    无Form表单回车键提交 请输入搜索关键词"&gt; &lt;button onclick="submitForm()"&gt;提交 // 获取输入框元素 const searchInput = document.getElementById('searchInput'); // 监听回车键事件 searchInput....

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

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

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

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

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

    通常情况下,表单提交通过点击提交按钮触发,但在某些场景下,为了提高用户体验,开发者会选择使用键盘事件(如按Enter键)来触发表单提交。 #### 二、使用Java技术实现表单提交 虽然题目中提到“应用Java技术实现...

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

    在处理Web表单时,常常会涉及到用户输入信息然后提交表单的场景。表单提交是Web应用中非常常见的操作,通常是通过点击一个提交按钮来...正确处理回车键导致的表单提交,可以大大提高用户体验并避免数据错误提交的问题。

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

    如果你只想阻止特定输入框的回车提交,可以在`&lt;input&gt;`元素上设置`onkeypress`事件,返回`false`来阻止提交。例如: ```html ();"&gt; ``` 其对应的JavaScript函数如下: ```javascript function gosearch() { ...

    bootstrap表单按回车会自动刷新页面的解决办法

    想给form表单增加回车自动提交的功能 $('#password').keydown(function(event){ if (event.keyCode == 13) $('#login').click(); }); 然而,并没有达到预期的效果,而是自动刷新了表单,并将表单参数放在了url...

    网页 按ctrl+回车提交

    在网页开发中,"网页 按ctrl+回车提交" 是一种常见的用户交互功能,它允许用户在填写表单后通过按下键盘上的Ctrl+Enter组合键来快速提交信息,而不是仅依赖于点击按钮。这一功能可以提升用户体验,特别是在处理大量...

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

    总结起来,在没有form标签的表单情况下,想要通过回车键提交表单,可以通过JavaScript来实现。主要步骤包括定义键盘事件处理函数,捕捉回车键事件,并调用一个模拟登录验证的函数。同时,随着Ajax技术的普及,客户端...

    js光标定位文本框回车表单提交问题的解决方法

    本文实例讲述了js光标定位文本框回车表单提交问题的解决方法。分享给大家供大家参考。具体分析如下: 当光标定位在辅助查找的文本框后回车,页面会出现方法的返回的json串。 原因:When there is only one single-...

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

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

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

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

Global site tag (gtag.js) - Google Analytics