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


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长整型精度问题实例分析
Jan 13 Javascript
javascript包装对象实例分析
Mar 27 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 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
cmd下运行php脚本
2008/11/25 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python转码问题的解决方法
2008/10/07 Python
python实现哈希表
2014/02/07 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
用python爬取租房网站信息的代码
2018/12/14 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
django将数组传递给前台模板的方法
2019/08/06 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
详解Python 循环嵌套
2020/07/09 Python
Django中ORM的基本使用教程
2020/12/22 Python
python Scrapy框架原理解析
2021/01/04 Python
通息工程毕业生自荐信
2013/10/16 职场文书
《都江堰》教学反思
2014/02/07 职场文书
Python实现简单的猜单词
2021/06/15 Python
MySQL创建表操作命令分享
2022/03/25 MySQL
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers