本文主要记录了我调查问题的思路想法,想看结论的同学直接拖到最后吧

上周在做项目的时候,有一个需求是在页面中加一个按钮,点一下查询数据库将内容填充在表格中。这不是很简单嘛,页面加个按钮,发送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>的注意点的更多相关文章

  1. 【小瑕疵】表单中的button会自动提交?

    在表单中使用button标签的时候会发现,即使什么类型都没有设置,但是在点击的时候会发现,表单会自动提交 比如: 我在一个表单的button中添加一个函数,当点击这个按钮时会增加一行内容: 但是当我实 ...

  2. form表单中的button按钮

    如果在form表单中 , 存在button元素,button元素就充当了submit的角色

  3. form表单中的button自动刷新页面问题

    form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击 ...

  4. form表单中新增button按钮,点击按钮表单会进行提交

    原生button控件,在非ie浏览器下,如果不指定type,默认为submit类型.如果不想自动提交表单,指定type=“button”

  5. 如何阻止form表单中的button按钮提交

    <form action="#" method="post"> <input type="text" name=" ...

  6. 关于form表单中button按钮自动提交问题

    坑:点击确认按钮,form表单提交2次,发送后台2次请求 //错误代码: <Button id="btnSubmit" name="btnSubmit" ...

  7. form表单中button按钮返回上一页解决办法

    解决Form中button按钮不好用的问题解决办法. 方法一: 1.在Form表单标签中国增加一个属性,如下图,红框处 2.返回按钮样式 3.onclick方法需要跳转的页面,遮挡处为需要返回的页面 ...

  8. form表单中多个button按钮必须声明type类型

    最近在做一个后台管理系统,发现了一个小bug: 问题描述:form表单中有多个button按钮(以下图为例),如果第一个button不写type属性,那么点击第一个button按钮会触发submit事 ...

  9. 表单中submit和button按钮的区别!

    对于表单的按钮以前知道submit和button有区别,但没有深入探索,今天刚好又碰到这个问题,看了下网络上这位朋友已经有现成的总结了,而且比较到位,拿来跟大家分享下(原文地址:http://blog ...

随机推荐

  1. [oracle] 解决ORA-30036:无法按8扩展段(在还原表空间‘XXXX’中)

    select * from dba_data_files awhere a.TABLESPACE_NAME='UNDOTBS' alter tablespace UNDOTBS add datafil ...

  2. 和ef一起使用的一些知识点。

    ObjectContext.ExecuteFunction 方法 (String, ObjectParameter[]) .NET Framework 4.6 and 4.5    执行在数据源中定义 ...

  3. Spring(一)简述

    一.Spring简述 一段费话 Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2 ...

  4. SSH框架入门学习之二(spring)

    Spring也是一个开源框架,我在学习Spring的时候,认为最重要的几点是:IOC(控制反转).AOP(面向切面)和容器概念. 详细的教程还请大家去看网上的视频,这里贴一个小Demo以供学习. (前 ...

  5. YYModel V1.0.4源码解析

    YYKit出现了很长时间了,一直想要详细解析一下它的源码,都是各种缘由推迟了. 最近稍微闲了一点,决定先从最简单的YYModel开始吧. 首先,我也先去搜索了一下YYModel相关的文章,解析主要AP ...

  6. dotnet-warp &amp;&amp; NSSM 部署 .net core 项目到 windows 服务

    如果你想将 .net core 项目以服务的形式部署到 windows 系统,希望本篇文章能够让你少走弯路 dotnet-warp 安装使用 dotnet-warp 是一个全局的.NET Core 工 ...

  7. Hbase Filter过滤器查询详解

    过滤器查询 引言:过滤器的类型很多,但是可以分为两大类——比较过滤器,专用过滤器 过滤器的作用是在服务端判断数据是否满足条件,然后只将满足条件的数据返回给客户端: hbase过滤器的比较运算符: LE ...

  8. apache工作模式总结及网站访问缓慢处理记录

    apache目前主要有两种模式:prefork模式和worker模式:1)prefork模式(默认模式)prefork是Unix平台上的默认(缺省)MPM,使用多个子进程,每个子进程只有一个线程.每个 ...

  9. Jensen不等式

  10. HDU1260(KB12-H DP)

    Tickets Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...