如何防止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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
ES6 async、await的基本使用方法示例
Jun 06 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滚动日志的代码实现
2015/06/10 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
javascript eval函数深入认识
2009/02/21 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python如何实现数据的线性拟合
2019/07/19 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
python爬取招聘要求等信息实例
2020/11/20 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
小学教师听课制度
2014/02/01 职场文书
草船借箭教学反思
2014/02/03 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
年终晚会活动方案
2014/08/21 职场文书
给客户的感谢信
2015/01/21 职场文书
2015年环保局工作总结
2015/05/22 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS