如何防止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 checkbox(复选框) 使用集锦
Apr 28 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 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
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
从零学jquery之如何使用回调函数
2014/05/16 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
Python中实现常量(Const)功能
2015/01/28 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python输入多行字符串的方法总结
2019/07/02 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
机电专业毕业生推荐信
2013/11/10 职场文书
护士实习鉴定范文
2013/12/22 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
商场中秋节广播稿
2014/01/17 职场文书
社区安全检查制度
2014/02/03 职场文书
中学生自我鉴定
2014/02/04 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
2015年女生节活动总结
2015/02/27 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技