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


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 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
Vue中计算属性computed的示例解读
2017/07/26 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
传播学毕业生求职信
2013/10/11 职场文书
粗加工管理制度
2014/02/04 职场文书
交通事故调解协议书
2014/04/16 职场文书
2014国庆节标语口号
2014/09/19 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
Python中的嵌套循环详情
2022/03/23 Python