如何防止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 相关文章推荐
深入分析Cookie的安全性问题
Mar 01 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
javascript实现简易聊天室
Jul 12 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
微信小程序实现电影App导航和轮播
Nov 30 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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
php简单图像创建入门实例
2015/06/10 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
python网络编程之数据传输UDP实例分析
2015/05/20 Python
分析python请求数据
2018/08/19 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
简单了解Django项目应用创建过程
2020/07/06 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
财经学院自荐信范文
2014/02/02 职场文书
犯错检讨书
2014/02/21 职场文书
工程师岗位职责规定
2014/02/26 职场文书
工作犯错保证书
2015/05/11 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js