如何防止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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
Javascript 陷阱 window全局对象
Nov 26 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
vue实现2048小游戏功能思路详解
May 09 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实现把数组按指定的个数分隔
2014/02/17 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
浅谈对yield的初步理解
2017/05/29 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python交互式图形编程实例(三)
2017/11/17 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
python mysql断开重连的实现方法
2019/07/26 Python
django列表筛选功能的实现代码
2020/03/27 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
职务任命书范本
2014/06/05 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
关于颐和园的导游词
2015/01/30 职场文书
工作岗位职责范本
2015/02/15 职场文书
个人优缺点总结
2015/02/28 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python