如何防止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 相关文章推荐
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 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
第九节 绑定 [9]
2006/10/09 PHP
PHP 日常开发小技巧
2009/09/23 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
php实现读取超大文件的方法
2014/07/28 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
JS作用域深度解析
2016/12/29 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
angular多语言配置详解
2019/05/16 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
python推导式的使用方法实例
2021/02/28 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
学生保证书范文
2014/04/28 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL