本文主要记录了我调查问题的思路想法，想看结论的同学直接拖到最后吧
上周在做项目的时候，有一个需求是在页面中加一个按钮，点一下查询数据库将内容填充在表格中。这不是很简单嘛，页面加个按钮，发送ajax请求，拿到数据，填充表格。可是在写完这一套流程后，以为已经万事大吉的时候，点下按钮之后，页面中的其他位置的某个input框突然变成了加粗的红色？？？？就下面这个样子。
1.png
第一次见到这样的东西，代码中从来没有这样的设置。然后看了一下input标签之后，发现是这样写的
<input type="text" id="money" pattern="[0-9]*" />
pattern是正则表达式用来验证输入的，上面代码意思明显是只能输入数字，金额的逗号肯定是不能验证通过的，找到了这个红框的来源（不同浏览器对于报错有不同的展示，IE11为展示红框和tooltip，Chrome只有tooltip）。
Chrome中的样式
知道红框是怎么出来的，这个pattern的作用就是只能规定输入数字，我就删掉了这个pattern，用其他方法控制只能输入数字，如在keyup的时候使用正则表达式去除数字以外的字符。虽然这个时候点击按钮，不会报红框显示了。
就在我以为改完收工，测试完input的输入后习惯性的敲了一个回车，然后表格内容就自动填充了？？？？WTF，怎么会出现这样的事情。我怎么也想不通，回车会触发点击事件？？？？越来越超出我的认知了。
正常的输入框点击回车不会失去焦点也不会触发任何事件啊，调查后得知当表单中只有一个input输入框时，用户按下回车键会提交这个表单。可是我的页面有很多输入框啊，并不会提交表单。在这只能打住了，去除pattern不是解决问题的根本办法，还是另有所在的。然后就继续调查出现红框的输入框。
输入框的逗号是js中动态添加的，需求就是要添加逗号的表示，我总不可能去掉这个处理。然后我就在其他页面寻找，发现其他页面也有一模一样的金额输入框，输入同样的值为什么别的页面不会出错？
接着就继续调查红框是在什么时候会触发，查到的结果是在表单提交的按钮按下的时候才会触发。也就是点击submit时会触发。所以问题的关键就跑到了我新增的按钮上面。
<button id="getData" class="dataBtn">填充数据<button>
乍一看并没有什么问题，然后从基础学起，W3school上面是这样写的
2.png
难道是因为我没有添加type="button"，然后就抱着尝试的心态添加了进去，最后发现竟然解决了问题。
然后继续看为什么type影响这么大
3.png
看了上面的描述大概懂了为什么出现了错误，就是我没有添加type类型，导致了按下按钮成了提交表单，触发了pattern的验证，导致出现了红框。可是我们项目使用的就是IE浏览器，但还是提交了表单，W3school的这块描述还是有问题的。不过以后在写按钮的时候一定要记得添加type，不然会导致莫名其妙的错误。
最后小总结一下，这次调查发现了以下问题。
网友评论