我们有时候希望回车键敲在文本框(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表单(回车)提交问题的更多相关文章

  1. form表单回车提交

    当form中只有一个input[type="text"](其他的表单元素可以随意有)的输入框时候,当input[type="text"]获得焦点的时候,无论表单 ...

  2. form表单回车提交问题,JS监听回车事件

    我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...

  3. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. 使用ajax方法实现form表单的提交(附源码)

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

  5. form表单js提交

    form表单js提交      $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...

  6. 微信自带浏览器不支持form表单post提交方案解决

      微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...

  7. 利用 ajax自定义Form表单的提交方式

    需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...

  8. form表单的提交方式

    开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单  <input type="submit"/> <!DOCTYPE htm ...

  9. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

随机推荐

  1. Delphi 调用Dll的两种方式

    unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  2. Mariadb 在centos 7下的安装配置

    安装Mariadb数据库: sudo yum install mariadb-server 启动数据库: sudo systemctl start mariadb 设置自动启动: sudo syste ...

  3. 64位系统如何导入excel

    1.运行C:\Windows\SysWOW64\odbcad32.exe,打开后如下图所示: 2.点击添加,选择如下图所示Microsoft Excel Driver(*.xls) 3.点击完成,在弹 ...

  4. nf_conntrack被启用导致服务故障

    1.查看是否有 nf_conntrack 使用iptable -L -t nat  查看,注意!!!查看也会启用nf_conntrack,任何和nat有关的命令都会启用nf_contrack -L 查 ...

  5. Windows出现带空格文件名无法删除

    下午同事的电脑上突然出现一个文件夹,怎么也删除不了,也无法重命名. 直接删除文件夹提示:无法读取源文件或磁盘. 然后查相关进程,未发现异常.重启进安全模式下删除,一样的结果,提示:无法读取源文件或磁盘 ...

  6. Foundation ----->NSSet

    1.集合类     NSString *s1 = @"zhangsan";     NSString *s2 = @"lisi";     NSString * ...

  7. lua学习笔记(一)

    lua是一种嵌入式的语言,首先安装. lua安装依赖于readline库,下载readline tar -zxvf readline-6.2.tar.gz cd readline-6.2 ./conf ...

  8. .net MVC 中枚举类型Enum 转化成 下拉列表的数据源

    第一次写技术博文,记录下工作中遇到的问题,给自己的知识做个备份,也希望能帮助到其他的同学 最近接手了公司的一个新的项目.有个页面涉及相关设计. 分享一个经常用到的吧. 方法一: 直入主题吧 我们的目的 ...

  9. maven本地安装jar包同时生成pom文件

    maven 本地安装jar包:mvn install:install-file -Dfile=本地路径/ojdbc12.jar -DgroupId=com.oracle -DartifactId=oj ...

  10. leetcode-javascript

    1. Largest Number For example, given [3, 30, 34, 5, 9], the largest formed number is 9534330. // wro ...