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


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 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
javascript 原型继承介绍
Aug 30 Javascript
瀑布流布局代码一例
Apr 11 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
VUE路由动态加载实例代码讲解
Aug 26 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
用PHP读注册表
2006/10/09 PHP
Content-type 的说明
2006/10/09 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现一次创建多级目录的方法
2015/05/15 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python常见工厂函数用法示例
2018/03/21 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
python导入库的具体方法
2020/06/18 Python
Python如何将模块打包并发布
2020/08/30 Python
如何利用python 读取配置文件
2021/01/06 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
投标邀请书范文
2014/01/31 职场文书
高三学生评语大全
2014/04/25 职场文书
历史博物馆观后感
2015/06/05 职场文书
中秋晚会致辞
2015/07/31 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server