网页中表单按回车就自动提交的问题的解决方案


Posted in Javascript onNovember 03, 2014

1、当form表单中只有一个<input type="text" name="name" />时按回车键将会自动将表单提交。

<form id="form1" action="post.php" method="post">   

    <input type="text" name="name" />   

</form> 

再添加一个

<input type="text" /> 

按下回车将不会自动提交,但是页面上显示一个不知所云的输入框挺别扭,后从网上搜到两个解决办法:
(1)添加一个

<input style="display: none;" type="text" /> 

不显示输入框,然后回车之后也不会提交:

<form id="form1" action="post.php" method="post">   

    <input type="text" name="name" />   

    <input style="display:none" />   

</form> 

(2)添加一个onkeydown事件,然后回车之后也不会显示:

<form id="form1" action="post.php" method="post">   

    <input type="text" name="name" onkeydown="if(event.keyCode==13) return false;"/>   

</form>

如果想添加回车事件可以在onkeydown事件中添加判断提交表单:

<form id="form1" action="post.php" method="post">   

    <input style="display:none" />   

    <input type="text" name="name" onkeydown="if(event.keyCode==13){gosubmit();}" />   

</form>

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

要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则:

如果表单里有一个type="submit"的按钮,回车键生效。

如果表单里只有一个type="text"的input,不管按钮是什么type,回车键生效。

如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。

其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。

type="image"的input,效果等同于type="submit",不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。

Javascript 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 #Javascript
jquery处理json对象
Nov 03 #Javascript
js格式化时间小结
Nov 03 #Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 #Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 #Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 #Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 #Javascript
You might like
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
告诉大家什么是JSON
2008/06/10 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
python实现电子词典
2020/04/23 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
python Celery定时任务的示例
2018/03/13 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
《池塘边的叫声》教学反思
2014/04/12 职场文书
生物技术专业求职信
2014/06/10 职场文书
办公室岗位职责
2015/02/04 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android