我们有时候希望回车键敲在文本框(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. linux expect命令使用入门

    expect的核心是spawn expect send set   spawn:spawn是进入expect环境后才可以执行的expect内部命令,相当于shell中的内置命令,通过它,调用需要执行的 ...

  2. javascript arguments解释,实现可变长参数。

    在C#中,有可变长参数params[],但是在js中,如何实现这种可变参数呢? 一.可变长参数 arguments是非常好的解决方法,一直不知道javascript有这个东西. 先来看看应用场景,使用 ...

  3. js面向对象的实现(example 一)

    //通过函数原型链(prototype)的方式来构造对象 //通过闭包的方式来对元素类进行封装 //通过函数原型链的方式来构造对象的方法和类的继承 //通过以上步骤就可以用函数的形式来实现类的,封装, ...

  4. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  5. index()、e.target.value、on()与快捷处理的区别、

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. java8之接口增强

    Java8是由oracle公司于2014年3月正式发布,它是继java5 以来最重要的发布版本.Java8包含了很多新的特性,可以简化开发,提升代码的可读性. Java8的一些重要新特性包括: l 接 ...

  7. PCA降纬一步一步

    import numpy as np 第一步:原始值 X1 0.9 2.4 1.2 0.5 0.3 1.8 0.5 0.3 2.5 1.3 X2 1 2.6 1.7 0.7 0.7 1.4 0.6 0 ...

  8. pascal闪电入门系列目录

    第一章  准备工作 第二章  Hello,world! 第三章  输出.输入 第四章  变量常量.基本数据类型 第五章  格式.注释 第六章  运算符.表达式.优先级 第七章  分支结构 第八章  数 ...

  9. {Reship}{Code}{CV}

    UIUC的Jia-Bin Huang同学收集了很多计算机视觉方面的代码,链接如下: https://netfiles.uiuc.edu/jbhuang1/www/resources/vision/in ...

  10. Python全栈开发day5

    一.lambda表达式 对于简单的函数,存在一种简便的表示方式,即:lambda表达式 1 2 3 >>> shaw = lambda x,y:x + y >>> ...