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


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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
js document.write()使用介绍
Feb 21 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
js实现转动骰子模型
Oct 24 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
JS定时器如何实现提交成功提示功能
Jun 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
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
实例解析Array和String方法
2016/12/14 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python读写文件方法总结
2015/06/09 Python
深入解析Python中的urllib2模块
2015/11/13 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
python实现控制台输出颜色
2021/03/02 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
团员的自我评价
2013/12/01 职场文书
会计主管岗位职责
2014/01/03 职场文书
安全环保标语
2014/06/09 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
唐山大地震观后感
2015/06/05 职场文书
文艺委员竞选稿
2015/11/19 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers