如何防止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 相关文章推荐
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
vue实现动态按钮功能
May 13 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
JavaScript实现图片切换效果
2017/08/12 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
python中元类用法实例
2014/10/10 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
质量工程师岗位职责
2013/11/16 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
知识竞赛活动方案
2014/02/18 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js