如何防止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 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
js控制input输入字符解析
Dec 27 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
js比较日期大小的方法
May 12 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
vue中使用props传值的方法
May 08 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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文件操作的详解
2013/06/05 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
ie8本地图片上传预览示例代码
2014/01/12 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
urllib2自定义opener详解
2014/02/07 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python集合是否可变总结
2019/06/20 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
数控技校生自我鉴定
2014/03/02 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
财务部总监岗位职责
2014/03/12 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
仰望星空观后感
2015/06/10 职场文书
《西门豹》教学反思
2016/02/23 职场文书
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript