表单中使用<button>的注意点
本文主要记录了我调查问题的思路想法,想看结论的同学直接拖到最后吧
上周在做项目的时候,有一个需求是在页面中加一个按钮,点一下查询数据库将内容填充在表格中。这不是很简单嘛,页面加个按钮,发送ajax请求,拿到数据,填充表格。可是在写完这一套流程后,以为已经万事大吉的时候,点下按钮之后,页面中的其他位置的某个input框突然变成了加粗的红色????就下面这个样子。
第一次见到这样的东西,代码中从来没有这样的设置。然后看了一下input标签之后,发现是这样写的
<input type="text" id="money" pattern="[0-9]*" />
pattern是正则表达式用来验证输入的,上面代码意思明显是只能输入数字,金额的逗号肯定是不能验证通过的,找到了这个红框的来源(不同浏览器对于报错有不同的展示,IE11为展示红框和tooltip,Chrome只有tooltip)。下面是Chrom中对于pattern的展示。
知道红框是怎么出来的,这个pattern的作用就是只能规定输入数字,我就删掉了这个pattern,用其他方法控制只能输入数字,如在keyup的时候使用正则表达式去除数字以外的字符。虽然这个时候点击按钮,不会报红框显示了。
就在我以为改完收工,测试完input的输入后习惯性的敲了一个回车,然后表格内容就自动填充了????WTF,怎么会出现这样的事情。我怎么也想不通,回车会触发点击事件????越来越超出我的认知了。
正常的输入框点击回车不会失去焦点也不会触发任何事件啊,调查后得知当表单中只有一个input输入框时,用户按下回车键会提交这个表单。可是我的页面有很多输入框啊,并不会提交表单。在这只能打住了,去除pattern不是解决问题的根本办法,还是另有所在的。然后就继续调查出现红框的输入框。
输入框的逗号是js中动态添加的,需求就是要添加逗号的表示,我总不可能去掉这个处理。然后我就在其他页面寻找,发现其他页面也有一模一样的金额输入框,输入同样的值为什么别的页面不会出错?
接着就继续调查红框是在什么时候会触发,查到的结果是在表单提交的按钮按下的时候才会触发。也就是点击submit时会触发。所以问题的关键就跑到了我新增的按钮上面。
<button id="getData" class="dataBtn">填充数据<button>
乍一看并没有什么问题,然后从基础学起,W3school上面是这样写的
难道是因为我没有添加type="button",然后就抱着尝试的心态添加了进去,最后发现竟然解决了问题。
然后继续看为什么type影响这么大
看了上面的描述大概懂了为什么出现了错误,就是我没有添加type类型,导致了按下按钮成了提交表单,触发了pattern的验证,导致出现了红框。可是我们项目使用的就是IE浏览器,但还是提交了表单,W3school的这块描述还是有问题的。不过以后在写按钮的时候一定要记得添加type,不然会导致莫名其妙的错误。
最后小总结一下,这次调查发现了以下问题。
1、表单中只有一个input框时,按下回车会提交表单。但是表单中虽然有多个输入框,但是存在没有添加type的button时,会被当成提交按钮,回车按下会触发按钮上事件。
2、button标签一定一定一定要添加type属性,虽然文档中说IE浏览器type="button",但是实测后IE中仍然是submit。
3、追加一条以前遇到的问题。就是input的type="image",这个属性值得官方描述是定义图像形式的提交按钮。提交按钮,提交按钮,提交按钮,重要的说三遍,这个不是用来放置图片的标签,最好使用img标签,避免点击图片又提交事件。
表单中使用<button>的注意点的更多相关文章
- 【小瑕疵】表单中的button会自动提交?
在表单中使用button标签的时候会发现,即使什么类型都没有设置,但是在点击的时候会发现,表单会自动提交 比如: 我在一个表单的button中添加一个函数,当点击这个按钮时会增加一行内容: 但是当我实 ...
- form表单中的button按钮
如果在form表单中 , 存在button元素,button元素就充当了submit的角色
- form表单中的button自动刷新页面问题
form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击 ...
- form表单中新增button按钮,点击按钮表单会进行提交
原生button控件,在非ie浏览器下,如果不指定type,默认为submit类型.如果不想自动提交表单,指定type=“button”
- 如何阻止form表单中的button按钮提交
<form action="#" method="post"> <input type="text" name=" ...
- 关于form表单中button按钮自动提交问题
坑:点击确认按钮,form表单提交2次,发送后台2次请求 //错误代码: <Button id="btnSubmit" name="btnSubmit" ...
- form表单中button按钮返回上一页解决办法
解决Form中button按钮不好用的问题解决办法. 方法一: 1.在Form表单标签中国增加一个属性,如下图,红框处 2.返回按钮样式 3.onclick方法需要跳转的页面,遮挡处为需要返回的页面 ...
- form表单中多个button按钮必须声明type类型
最近在做一个后台管理系统,发现了一个小bug: 问题描述:form表单中有多个button按钮(以下图为例),如果第一个button不写type属性,那么点击第一个button按钮会触发submit事 ...
- 表单中submit和button按钮的区别!
对于表单的按钮以前知道submit和button有区别,但没有深入探索,今天刚好又碰到这个问题,看了下网络上这位朋友已经有现成的总结了,而且比较到位,拿来跟大家分享下(原文地址:http://blog ...
随机推荐
- STM32——CAN总线过滤器设置
STM32CAN控制器每个筛选器组由两个32位的寄存器组成. 根据所需位宽的不同,各个筛选器可配置成16位或32位模式(如下图,当FSCx=1为32位模式,FSCx=0时为16位模式).同时,筛选器的 ...
- web开发:css基础
一.w3c架构分析 二.css三种引入 三.三种引入的优先级 四.基础选择器 五.长度单位与颜色 六.文件样式操作 七.display 一.w3c架构分析 <!DOCTYPE html> ...
- xcode 中 vary for traits详解
https://www.jianshu.com/p/d6896437e5a7 这篇文章写的很好!
- 蓝桥杯BASIC-13 数列排序
问题描述 给定一个长度为n的数列,将这个数列按从小到大的顺序排列.1<=n<=200 输入格式 第一行为一个整数n. 第二行包含n个整数,为待排序的数,每个整数的绝对值小于10000. 输 ...
- Spring 注解无效 空指针异常
对于Java开发,现在Spring已成为一种生态,使用Spring成为一种享受,Spring的使用让开发变得更加便捷. 而Spring好用归好用,若不清楚里面的工作原理,使用的时候难免会踩到一些坑. ...
- 如何在SpringBoot的 过滤器之中注入Bean对象
我建立一个全局拦截器,此拦截器主要用于拦截APP用户登录和请求API时候,必须加密,我把它命名为SecurityFilter,它继承了Filter,web应用启动的顺序是:listener->f ...
- Android Vitals各性能指标介绍
Android vitals 简介 谷歌推荐使用Android vitals来帮助开发者提高App的稳定性和性能表现. 作为这个方案的一部分, Play Console提供了Android Vital ...
- 开放式最短路径优先OSPF
1.OSPF基本知识 OSPF作为基于链路状态的协议,解决了RIP在收敛慢,路由环路,可扩展性差等问题,还有以下优点: 采用组播方式发布报文,可以减少对其他不运行ospf路由器的影响 ospf直尺无类 ...
- centos7编译安装PHP7已经把你逼到去安定医院看门诊的地步?请看此文
本文援引自https://www.cnblogs.com/lamp01/p/10101659.html,亲测可行,特此鸣谢 地球上总有一群人是如此深爱PHP,但无奈的是编译安装的过程化特性,导致各种b ...
- C# Transaction 事务处理 -环境事务
一.TransactionScope 环境事务 static async Task TransactionScopeAsync() { using (var scope = new Transacti ...