简单实现"回车!=提交"(去除表单的回车即提交)
--------------------------------------------------------------------------------------------------
实现"回车!=提交"的问题,一般可以从"按钮的type类型" 和 "输入框个数"两处着手。
------------------------------@chenwei <www.farwish.com>-------------------------------
默认情况下,单个输入框,无论按钮的type="submit"还是type="button"类型,回车即提交。
1.当type="submit"时,无论有几个type="text"输入框,回车均表示提交。(submit)
2.当type="button"时,且存在多个输入框,回车不提交。(button)
3.解决单个输入框的回车即提交问题,参考第二点:可以增加一个input="text",隐藏; 然后type类型为button。
在实际应用中,input输入框很少只有一个的情况,那么只需记住第二条即可应对。
使用JS事件阻止表单提交 不在本文讨论范围,当然也是可以实现的。
--------------------------------------------------------------------------------------------------
简单实现"回车!=提交"(去除表单的回车即提交)的更多相关文章
- 按下回车默认提交form表单问题
最近开发中碰到一个问题,项目中有几个列表展示页面,允许用户通过查询条件模糊查询数据.用户录入关键字后点击回车会调用查询方法根据关键字查询,原先功能没有问题,但是最近发现在查询输入框中按下回车会直接刷新 ...
- Vue Element-ui 框架:路由设置 限制文件类型 表单验证 回车提交 注意事项 监听事件
1.验证上传文件的类型: (1)验证图片类型 <template> <el-upload class="avatar-uploader" action=" ...
- jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...
- 用JavaScript实现表单按回车自动提交
JavaScript实现表单form1按回车自动提交代码如下: <script type="text/javascript"> function submitMe() ...
- formidable处理提交的表单或文件的简单介绍
一般来说,客户端向服务端提交数据有GET和POST这两种方式,在之前的文章node.js当中的http模块与url模块的简单介绍当中我们可以知道通过req.url与url模块的配合处理可以快速得到客户 ...
- formidable处理提交的表单或图片文件的简单介绍
一般来说,客户端向服务端提交数据有GET和POST这两种方式,在之前的文章node.js当中的http模块与url模块的简单介绍当中我们可以知道通过req.url与url模块的配合处理可以快速得到客户 ...
- 如何使用PHP验证客户端提交的表单数据
PHP 表单验证 本章节我们将介绍如何使用PHP验证客户端提交的表单数据. PHP 表单验证 在处理PHP表单时我们需要考虑安全性. 本章节我们将展示PHP表单数据安全处理,为了防止黑客及垃圾信息我们 ...
- Jquery通过Ajax方式来提交Form表单
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...
- ajax提交form表单资料详细汇总
一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...
随机推荐
- set函数&操作
集合的交叉并补 交集, 共同的部分 set1 & set2 set1.intersection(set2) 差集 set1有set2没有的元素 set1 - set2 set1.differe ...
- Django Web最小框架
1:环境 MAC+Pycharm 2:Web框架搭建 新建py工程: 工程右键->Open in terminal: django-admin startproject mysite cd my ...
- Visual Studio 2012 & MyEclipse2015 快捷键对比
- admin源码解析以及仿照admin设计stark组件
---恢复内容开始--- admin源码解析 一 启动:每个APP下的apps.py文件中. 首先执行每个APP下的admin.py 文件. def autodiscover(): autodisco ...
- redis永久化存储
redis持久化存储 原因:redis是存放在内存中的,断电会导致数据丢失解决方法:把redis数据进行持久性存储,将其存储在磁盘中. 存储方式:1.RDBRDB中文名为快照/内存快照,Redis按照 ...
- JVM总结-虚拟机加载类
从 class 文件到内存中的类,按先后顺序需要经过加载.链接以及初始化三大步骤.其中,链接过程中同样需要验证:而内存中的类没有经过初始化,同样不能使用.那么,是否所有的 Java 类都需要经过这几步 ...
- WPF GridLinesVisibility属性
GridLinesVisibility:网格线可见性样式,其值有四种:All,Horizontal,None,Vertical.对应:全部,水平,没有,垂直 <!--#region 表格--&g ...
- 接口详解例子代码(附Java1.8的接口新特性)
接口,与抽象类类似但是区别也很大,他们都是标签,用来提醒父类一定要实现的类里创建抽象方法.而接口类可以implements 多个接口,抽象类则只能父类只能继承一个抽象类,与抽象不同的是它不是继承组合关 ...
- kafka源代码环境配置
kafka版本10.0.0.没有采用最新版本是因为项目中目前使用了这个版本. 1.安装gradle 首先进入https://gradle.org/install 查看Install manually- ...
- ROS进阶学习笔记(10)- 搭建自己的Turtlebot(5) - Interactive Makers
用interactive_makers控制Turtlebot移动 interactive_makers 是Willow Garage公司开发的一个虚拟控制工具,可通过鼠标在虚拟环境中的操作,完成实际机 ...