如何防止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 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
原生js实现无缝轮播图效果
Jan 28 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/11/11 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python算法应用实战之队列详解
2017/02/04 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python实现小球弹跳效果
2019/05/10 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python 如何快速复制序列
2020/09/07 Python
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
韩国11街:11STREET
2018/03/27 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
2014年图书管理员工作总结
2014/12/01 职场文书
优秀党支部申报材料
2014/12/24 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript