`
jamm19860411
  • 浏览: 86617 次
  • 性别: 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添加背景图合适些。

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



通过以上可知只要把type="submit"改成type="button"然后js提交, 在不要有一个type=”text”的input就行了。就不会发生回车跳转。
但实验发现,ie和火狐不一样,火狐的submit按钮有掩藏的(display:block)和显现的都不行,必须全改,但ie只要显现的没有submit就行了。
分享到:
评论

相关推荐

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

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

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

    总结来说,防止`<input>`按回车自动提交`<form>`表单,可以通过增加隐藏的`<input>`元素或者使用JavaScript监听并阻止回车键的默认行为。这两种技术在实际开发中都得到了广泛的应用,可以根据项目需求选择适合的实现...

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

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

    表单填写时用回车代替TAB的实现方法

    关键之处在于tabindex,其设计思想是:为每个表单元素设置一个tabindex,其值分别为前一个表单元素的tabindex的值加一,函数的功能就是当用户按下回车键时先将当前tabindex的值加一,而后逐一与每个表单元素的...

    javascript回车完美实现tab切换功能

    javascript实现回车键切换tab功能的知识点涵盖了网页开发中对用户交互行为的处理。在页面中使用表格(tab)进行数据的录入和切换是常见的场景,尤其是在需要填写大量数据的时候。然而,当用户在使用小键盘(如数字小...

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

    在网页开发中,表单(Form)是用户与服务器交互的重要元素,用于收集用户输入的数据。回车键触发表单提交是一个常见的功能,但有时它可能会带来一些问题或需要进行特定的处理。本文将深入探讨回车键如何触发表单提交...

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

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

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

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

    javaScript实现回车登录

    ### JavaScript实现回车登录 #### 一、概述 在现代Web开发中,用户体验是至关重要的。其中一项提高用户体验的功能就是允许用户通过按“回车”键来触发登录操作,而不是必须点击登录按钮。这种功能可以通过...

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

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

    使Form界面回车是切换到下一项,注意不要设置from的accessbuttom和keyprebiew属性

    然而,在实现这一功能的过程中,有一些细节需要注意,比如不能设置`Form`的`AcceptButton`和`KeyPreview`属性。本文将详细介绍如何实现这一功能,并解释为什么不能设置这两个属性。 ### 实现思路 当用户按下...

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

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

    C#键盘输入回车键实现点击按钮效果的方法

    在C#编程中,有时我们希望用户能够通过按下键盘上的回车键来触发与点击按钮相同的操作,这在创建用户友好的界面时尤其有用。这个功能的实现涉及到窗体(Form)的事件处理以及键盘事件的监听。下面将详细介绍如何在C#...

    禁用Enter键表单自动提交实现代码

    在网页开发中,用户在填写表单时按下Enter键通常会导致表单的自动提交,这在某些场景下可能并不是我们期望的行为。例如,如果表单中有多个输入字段,我们可能希望用户能够在按下Enter键时进行换行(如在文本区域中)...

    JSP文本输入解决回车问题代码实例[可运行].rar

    在处理回车问题时,我们主要关注的是表单(`<form>`)元素和事件监听器。 在传统的HTML表单中,回车键会默认触发表单的submit事件,导致页面刷新或跳转。如果要在JSP中改变这种行为,我们有两种主要方法: 1. **...

    winfrom 下的控件回车跳转(TAB)

    控件间的焦点切换通常是通过Tab键来实现的,但有时用户可能希望使用回车键达到相同的效果。本篇将深入探讨如何在C#的WinForm应用中实现回车键触发控件焦点的跳转。 首先,我们需要理解C#中的事件处理机制。事件是...

    Delphi回车键代替Tab 键

    Form1: TForm1; implementation {$R *.dfm} procedure TForm1.FormActivate(Sender: TObject); begin Self.KeyPreview := True; // 设置KeyPreview为True,使得窗体能够优先接收键盘消息 end; procedure TForm...

    C# http系列之以form-data方式上传多个文件及键值对集合到远程服务器

    3. 消息主体里按照字段个数又分为多个结构类似的部分,每部分都是以--boundary开始,紧接着是内容描述信息,然后是回车(换一行),最后是字段具体内容(文本或二进制)。如果传输的是文件,还要包含文件名和文件类型...

    C#串口上位机Form版本

    本文将详细探讨"C#串口上位机Form版本"的四个关键更新点:文件保存功能、XML文件读写、回车键快捷发送以及窗体自动缩放,这些功能对于提升上位机的实用性和用户体验至关重要。 1. 文件保存功能: 在串口通信中,...

Global site tag (gtag.js) - Google Analytics