表单是什么,这一点对于大部分前端应该是很清楚的,作为原生的HTML控件,表单可以让我们在不依赖js与ajax的前提下,验证,并向服务器提交信息。
他很常用,掘金的登录框是表单:
掘金的搜索栏,也是表单:
甚至连文章的草稿界面,哦,他不是表单。
表单的行为也已经深入人心,当你输完密码,有多少人会点击登录而不是潇洒的摁下一记回车呢?但是有多少人思考过为什么点击回车就能提交表单呢?是有人为了回车单独做了一个键盘事件的监听器?
答案实际上是隐式提交(Implicit submission),这个操作太常用了以至于很多人都没有反应过来这是一个特殊的浏览器行为,什么是隐式提交,可以简单地这么描述,也可以看一下这个链接
当用户在一个表单的任意控件中摁下了回车,如果这个表单具有满足如下两个条件之一:
- 只有一个input控件;
- 有一个type="submit"的控件;
那么表单就会触发一次隐式提交,当表单具有type为submit的控件时,浏览器会以此为target发送一个
detail为0的ClickEvent,有点类似label和input之间的行为,如果说有多个type为submit的控件,浏览器会选择DOM树结构下所能找到的第一个控件做为事件的target。
如果这个时候只有一个input控件呢,这个时候会直接触发submit。
这两个事件将会在Enter的keypress事件之后,keyup事件之前触发,由于表单的提交会导致页面的reload,所以keyup事件也就不再会被触发了。
其实在UI框架渐渐发展,SPA大行其道的今天,表单渐渐的变得不那么重要,笔者过去写了近三年NG2,用过表单的次数屈指可数,第一是因为vm太方便了,没有必要用表单去封装数据了;第二可能就是现在的应用大部分都是SPA,而表单提交带来的页面刷新往往是SPA不希望的效果,所以对于表单的理解也就只留在了最基本的层面,仔细一看发现居然还有这种细节,还是学的太少了。
其实不止有隐式提交,还有一些别的,我想想怎么串起来,未完待续。