如何防止INPUT按回车自动提交表单FORM


Posted in Javascript onDecember 06, 2016

form中的input只有一个,input获得焦点时按回车会form自动提交:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--input获得焦点后按回车form自动提交-->
<input type="text">
</form>
</body>
</html>

有多个input时(不管是否是隐藏的),任意一个input获得焦点都不会提交。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--下面两个input获得焦点后按回车form都不会自动提交-->
<input type="text">
<input type="text">
</form>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--下面这个input获得焦点后按回车form不会自动提交-->
<input type="text">
<!-- 这里是通过样式隐藏,不等于<input type="hidden"> ,使用type="hidden"同样会提交 -->
<input type="text" style="display: none;">
</form>
</body>
</html>

单个input时,通过事件阻止form提交:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--下面两个input获得焦点后按回车form不会自动提交-->
<input type="text" onkeydown="if(event.keyCode==13)return false;">
</form>
</body>
</html>

所以,为了防止INPUT按回车form自动提交,可以以下两种方法:

增加一个隐藏的input。

为input增加一个按键事件来阻止form提交。

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

Javascript 相关文章推荐
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
详解ECharts使用心得总结
Dec 06 #Javascript
jQuery实现删除li节点的方法
Dec 06 #Javascript
详解springmvc 接收json对象的两种方式
Dec 06 #Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 #Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 #Javascript
vue2.0开发实践总结之入门篇
Dec 06 #Javascript
微信小程序中单位rpx和rem的使用
Dec 06 #Javascript
You might like
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
bootstrap table小案例
2016/10/21 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
PyQt5每天必学之布局管理
2018/04/19 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
Python join()函数原理及使用方法
2020/11/14 Python
国际花店:Pickup Flowers
2020/04/10 全球购物
生产内勤岗位职责
2013/12/07 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
大家访活动实施方案
2014/03/10 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
68句权威创业名言
2019/08/26 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python