如何防止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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
Angular4开发解决跨域问题详解
Aug 28 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
详解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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php数字游戏 计算24算法
2012/06/10 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
vuex 的简单使用
2018/03/22 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
python deque模块简单使用代码实例
2020/03/12 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
eBay加拿大站:eBay.ca
2019/06/20 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
创业资金计划书
2014/02/06 职场文书
2014春晚主持词
2014/03/25 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
法制宣传口号
2014/06/16 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
四风查摆剖析材料
2014/10/10 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
毕业设计致谢语
2015/05/14 职场文书
建党伟业观后感
2015/06/01 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android