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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
深入学习JavaScript对象
Oct 13 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
PHP脚本中include文件出错解决方法
2008/11/20 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
Python实现购物车功能的方法分析
2017/11/10 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
python随机模块random使用方法详解
2020/02/14 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
俄罗斯女装店:12storeez
2019/10/25 全球购物
入党现实表现材料
2014/12/23 职场文书
初中中等生评语
2014/12/29 职场文书
婚宴来宾致辞
2015/07/28 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
话题作文之自信作文
2019/11/15 职场文书
Redis 异步机制
2022/05/15 Redis