第一百四十三章 表单事件

焦点事件,也算是表单相关事件,因为就表单里用的最多呀。这一章我们再讲两个表单相关的事件。

一个 change,就是改变,在表单的输入项发生改变的时候被触发。这个用途很多,因为通过这个事件,我们就可以随着用户的输入不断进行响应了,想想真是一种十分美好的使用体验呢~但是很可惜,对于像单选框和复选框这样的元素,确实可以达到上述效果,但是对于文本输入框,或者多行文本框,在用户输入的时候并不会触发这一事件。只有当输入框失去焦点的时候,才会触发。这样并不能够做到实时的响应,所以对于输入的实时响应,我一般使用 keydown 事件来监控。

该事件也可以使用代码进行触发,但是实际上并没有改变什么,只是假装改变了,喊一声,然后引发连锁的其他事件。

还有一个非常重要的事件,就是提交了,submit。当表单被提交的时候,会触发这一事件。

需要注意,在一个表单里,一个按钮的默认动作就是提交这个表单。而普通表单一旦被提交,会触发一个跳转的动作,就像我们点击了一个链接一样。这会使我们离开当前页面或者刷新当前页面,那已经填写的所有内容都会消失,正在运行的所有(网页内的)代码都会被停止。

这是一个非常严重的问题,因为许多时候我们并不希望这样去做。这时候我们可以采取下列几种措施:

  • 如果不是用来提交表单的按钮,记得把它的类型设置为 type="button"
  • 干脆不使用表单。因为有时候,我们仅仅是为了在当前页面中获得一些输入和交互,而并不需要将它进行提交。这时候不使用表单域,可以减少好多麻烦。只是不够规范。
  • submit 事件中执行 event.preventDefault();,表示阻止该事件中默认操作的发生。但是请注意执行的时机尽量靠前,因为某些原因(不展开了),也许在这一条还没有被执行到的时候,提交操作就已经开始了,然后当然也就阻止不住了。

这个事件也可以使用代码进行触发,一旦触发,表单就真的被提交了(如果你没有阻止默认事件的发生的话)。

我们可以在提交事件中进行表单数据的验证,看用户输入的是否符合我们的预期,然后再决定是否要进行表单提交的操作,或者向用户提示输入不合规范的位置。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百四十三章 表单事件

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏