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 相关文章推荐
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
js面向对象方式实现拖拽效果
Mar 03 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
浅析python打包工具distutils、setuptools
2018/04/20 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
django 模型中的计算字段实例
2020/05/19 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
财务分析个人的自荐书范文
2013/11/24 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
会计求职信范文
2014/05/24 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
python 如何做一个识别率百分百的OCR
2021/05/29 Python
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL