表单中使用<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标签，避免点击图片又提交事件。