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 相关文章推荐
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
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
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
王纯业的Python学习笔记 下载
2007/02/10 Python
Python selenium文件上传方法汇总
2020/11/19 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Apache部署Django项目图文详解
2019/07/30 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python虚拟环境完美部署教程
2019/08/06 Python
Python中断多重循环的思路总结
2019/10/04 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
中国旅游网站:途牛旅游网
2019/09/29 全球购物
How TDD works
2012/09/30 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
中青班党性分析材料
2014/02/16 职场文书
学员自我鉴定
2014/03/19 职场文书
三方协议书范本
2014/04/22 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
Python 绘制多因子柱状图
2022/05/11 Python