当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. Java abstract class 和 interface 的区别

    Java abstract class 和 interface 的区别 1. abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制 2. 以Door的抽象概 ...

  2. taiyi_interview(Introduction To Database Refactoring)

    Introduction To Database Refactoring 原文链接:by Scott W. Ambler:http://www.tdan.com/view-articles/5010/ ...

  3. M站开发规范——By Klax

    M站开发的规范,根据具体情况,涉及代码组织的模式,代码编码风格,模块化等,经...研究...决定: 1.采用AMD 规范(RequireJS)实现js模块化. 2.单个文件尽量采用面向对象编程和模块化 ...

  4. 深度学习(dropout)

    other_techniques_for_regularization 随手翻译,略作参考,禁止转载 www.cnblogs.com/santian/p/5457412.html Dropout: D ...

  5. HTML 导航框架 (使用 Frame )

    文章出处  :  http://blog.sina.com.cn/s/blog_6f6d07f80100oqlt.html  (本文转自此博客) 在浏览网页时,我们经常会看到一个导航条,当点击导航条上 ...

  6. JavaWeb 学习009-4个页面,5条sql语句(添加、查看、修改、删除)

    ===========++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++==+++++++++ 2016-12-3------ ...

  7. Div+CSS命名规范

    注意事项:1.命名遵循驼峰式  2.尽量用中文  3.不加中杠和下划线   4.尽量不缩写,除非一看就明白的单词 头:header   标志:logo  友情链接:friendlink    内容:c ...

  8. Apache htpasswd命令用法详解

    一. 基础 htpasswd建立和更新存储用户名.密码的文本文件, 用于对HTTP用户的basic认证. # /usr/local/apache/bin/htpasswd –help Usage: h ...

  9. Busybox下tftp命令使用详解

    http://blog.chinaunix.net/uid-375398-id-1991686.html Busybox下的tftp命令可以用来进行单文件传输.使用的时候,是把电脑作为服务器Serve ...

  10. 【IOS】Xcode7以上免证书真机调试

    Xcode7之前,想要真机调试,必须花99刀购买开发者账号,而且步骤繁琐,需要下载证书.随着Xcode7的推出,大幅度的简化了真机调试的步骤,对ios开发工作者和正在学习ios开发的众多码农们,可以说 ...