如何防止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用图作提交按钮或超连接
Mar 26 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
Js apply方法详解
Feb 16 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
JS中箭头函数与this的写法和理解
Jan 14 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
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php 的反射详解及示例代码
2016/08/25 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
简单了解Python生成器是什么
2019/07/02 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
wxpython布局的实现方法
2019/11/01 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
Python Selenium库的基本使用教程
2021/01/04 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
新闻专业推荐信范文
2013/11/20 职场文书
本科毕业生的求职信范文
2013/11/20 职场文书
读书演讲主持词
2014/03/18 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
党员对照检查材料
2014/09/22 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书