如何防止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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php利用事务处理转账问题
2015/04/22 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
document.all与WEB标准
2020/05/13 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
Python检测QQ在线状态的方法
2015/05/09 Python
简单介绍Python中的round()方法
2015/05/15 Python
Python判断字符串与大小写转换
2015/06/08 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
正隆泰信息技术有限公司上机题
2012/06/14 面试题
社团活动总结书
2014/06/27 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
幼儿园见习总结
2015/06/23 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python