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


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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
Javascript下的keyCode键码值表
Apr 10 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
vue mvvm数据响应实现
Nov 11 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中的string类型使用说明
2010/07/27 PHP
php汉字转拼音的示例
2014/02/27 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
详解微信UnionID作用
2019/05/15 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
python实现批量修改文件名代码
2017/09/10 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python实战教程之自动扫雷
2018/07/13 Python
django在开发中取消外键约束的实现
2020/05/20 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
接受捐赠答谢词
2014/01/27 职场文书
元宵晚会主持词
2014/03/25 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
购房协议书范本
2014/10/02 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
党支部审查意见
2015/06/02 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android