Form表单按回车自动提交表单的实现方法


Posted in Javascript onNovember 18, 2016

1.form表单中只有一个input标签,按回车键将自动提交表单

当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交。

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' />
</form>

如果不想让其自动提交可以这样做:

再添加一个<input type="text"/>按下回车将不会自动提交,但是页面上显示一个不知所云的输入框挺别扭,后从网上搜到两个解决办法:

(1) 添加一个<input type='text' style='display:none'/>不显示输入框,然后回车之后也不会提交:

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' />
<input style='display:none' />
</form>

(2) 添加一个onkeydown事件,然后回车之后也不会显示:

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' onkeydown='if(event.keyCode==13) return false;'/>
</form>

ps: 我对于这个 event.keyCode==13表示没有看懂,只是理解为判断条件,但具体还是不懂.如果阁下明白,还请不吝赐教.

如果想添加回车事件,可以在onkeydown事件中添加判断提交表单:

<form id='form1' action='a1.jsp' method='post'>
<input style='display:none' />
<input type='text' name='name' onkeydown='if(event.keyCode==13){gosubmit();}' />
</form>

2.关于是否需要自动提交

我们有时候希望回车键敲在文本框(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添加背景图合适些。

以上所述是小编给大家介绍的Form表单按回车自动提交表单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
模仿jQuery each函数的链式调用
Jul 22 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 #Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 #Javascript
微信小程序开发实战教程之手势解锁
Nov 18 #Javascript
JavaScript之WebSocket技术详解
Nov 18 #Javascript
仿iframe效果Aajx文件上传实例
Nov 18 #Javascript
JavaScript之cookie技术详解
Nov 18 #Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 #Javascript
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
如何基于Python实现自动扫雷
2020/01/06 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
python中reload重载实例用法
2020/12/15 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
高中毕业生自我鉴定例文
2013/12/29 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
工作建议书范文
2014/05/13 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
见习报告的格式
2014/11/04 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL