表单中使用<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,不然会导致莫名其妙的错误。
最后小总结一下,这次调查发现了以下问题。