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

上周在做项目的时候,有一个需求是在页面中加一个按钮,点一下查询数据库将内容填充在表格中。这不是很简单嘛,页面加个按钮,发送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. Flutter——ListView组件(平铺列表组件)

    ListView的常见参数: 名称 类型 说明 scrollDirection Axis Axis.horizontal 水平列表 Axis.vertical 垂直列表 padding EdgeIns ...

  2. Kubernetes的yaml文件中command的使用

    前面说了init容器initContainers,这主要是为应用容器做前期准备工作的,一般都会用到shell脚本,这就会用到command,这里写写command的用法. command就是将命令在创 ...

  3. 如何让iframe框架和主页面共用一个滚动条(也称为:iframe高度自适应问题)

    最近在前端页面遇到了一个问题,我在一个页面中利用iframe框架引入了一个页面进来,但是这个页面的高度是不叫高的,高出电脑屏幕很多, 所以就引发了iframe框架一个滚动条,然后主页面一个滚动条,这样 ...

  4. F - Star SPOJ - STARSBC

    Fernando won a compass for his birthday, and now his favorite hobby is drawing stars: first, he marks ...

  5. 单元测试框架之unittest(一)

    一.单元测试的含义 unittest单元测试框架的设计灵感来源于Junit(Java语言的单元测试框架),它与其他语言的单元测试框架风格相类似,支持自动化测试.为测试共享setUp和shutDown. ...

  6. python 中 open与with open 的区别

    读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘, ...

  7. runloop 小记

    一.什么是runLoop 1.说白了,runloop就是运行循环 2.runloop,他是多线程的法宝 通常来讲,一个线程一次只能执行一个任务,执行完之后就退出线程.但是,对于主线程是不能退出的,因此 ...

  8. CentOS 6 自定义单实例 二进制方式 安装mariadb-5.5.59

    系统平台: CentOS release 6.9 (Final) 内核 2.6.32-696.el6.x86_64 1.去官网下载适合的二进制包 http://mariadb.org/ mariadb ...

  9. Linux学习日志(一)

    1 .Ubuntu 自带python 2 和 python 3的版本,切换方法如下: shell里执行: sudo update-alternatives --install /usr/bin/pyt ...

  10. 解决安装Anaconda后ZSH中使用的依然是系统自带的Python

    最近重装了Anaconda,pip是Anaconda的pip,可是python是系统的python.如下图. 最开始检查了很久是环境变量的问题,其实不是.需要执行conda init zsh