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


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 09 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
js style动态设置table高度
Oct 21 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 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文件上传主要代码讲解
2013/09/30 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
Python 字符串操作方法大全
2014/03/11 Python
python中的json总结
2018/10/11 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Python字典底层实现原理详解
2019/12/18 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
教育学习自我评价
2014/02/03 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python