如何防止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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
javascript连续赋值问题
Jul 08 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
微信小程序实现留言功能
Oct 31 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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中转义mysql语句的实现代码
2011/06/24 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
js 替换
2008/02/19 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
从零学Python之入门(三)序列
2014/05/25 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python实现图片转字符画的示例
2017/08/22 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
市场营销管理毕业生自荐信
2014/03/03 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
售后服务承诺书模板
2014/05/21 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
结婚通知短信大全
2015/04/17 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
导游词之西递宏村
2019/12/10 职场文书
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers