当form中只有一个input[type="text"](其他的表单元素可以随意有)的输入框时候,当input[type="text"]获得焦点的时候,无论表单中是否有type="submit"按钮,按下键盘回车键,都会提交表单(都会触发form.submit),如下:

<form id="test-form" action="formaction.php" method="post">
<input type="text" name="name">
</form>

我们有时候希望回车的时候提交表单,比如搜索行为,有时候又不希望回车提交表单,比如一些复杂的表单,需要避免回车键误操作在未完成表单填写的时候就出发了表单提交。那么怎么避免呢,目前我能知道的只有两个解决方案:

(1)添加一个input[type="text"],并隐藏:

<form id="test-form" action="formaction.php" method="post">
<input type="text" name="name">
<input type="text" style="display:none"><!-- 隐藏input -->
</form>

(2)添加一个onkeydown事件:

<form id="test-form" action="formaction.php" method="post">
<input type="text" name="name" onkeydown="if(event.keyCode == 13) return false;">
</form>

如果各位看官还有其他的解决办法,请多多指教!

form表单回车提交的更多相关文章

  1. Form表单(回车)提交问题

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

  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. FileReader对象

    在一些项目中,经常会遇到图片上传的情况,为了提高用户体验,一般会要求选择图片后 能预览一下图片. 以前的做法是 通过 ajax上传图片后,然后再显示出来,这样会产生大量的无用的图片文件,在HTML5的 ...

  2. 02 Apache Solr: 概览 Solr在信息系统架构中的位置

    概述:      Apache Solr是一个用JAVA语言构建在Apache Lucene项目上的开源的企业级搜索平台.主要特性包含:全文搜索.命中高亮.片段式搜索.实时索引.动态集群.数据库集成. ...

  3. 关于spring boot jar包与war包的问题

    此文为转载:http://mrlee23.iteye.com/blog/2047968 在开发调试完成之后,可以将应用打成JAR包的形式,在Eclipse中可以直接使用Maven插件的package命 ...

  4. PHP 之 this self parent static 对比

    this 绑定的是当前已经实例化的对象 这样长出现的问题: 如果你在一个父类中使用$this调用当前一个类的方法或者属性,如果这个类被继承,且在相应的子类中有调用的属性或者方法是,则父类中的$this ...

  5. string&&char 小技巧

    关于string =,assign()   //赋以新值 swap()   //交换两个字符串的内容 +=,append(),push_back() //在尾部添加字符 insert() //插入字符 ...

  6. Flask备注二(Configurations, Signals)

    Flask备注二(Configuration, Signals) Flask是一个使用python开发Web程序的框架.依赖于Werkzeug提供完整的WSGI支持,以及Jinja2提供templat ...

  7. HMC V7.9.0升级至SP2版本

    补丁下载地址:http://www-933.ibm.com/support/fixcentral/ 选择补丁版本 MH01405是和ftp://ftp.software.ibm.com/softwar ...

  8. url中,中文乱码的问题

    1// 在jsp中 String add = java.net.URLEncoder.encode("添加", "utf-8"); add = java.net ...

  9. Windows系统下部署安装一个/多个Tomcat8

    首先从http://tomcat.apache.org/上下载Tomcat8.0压缩版的,解压到指定路径后即可.  第一:在Windows系统中安装部署单个Tomcat         对于这种情况, ...

  10. C#结构

    namespace STRUCT_TEST{ class Program { struct A { public int X;//不能直接对其进行赋值 public int Y; public sta ...