form表单里的坑

2019-11-21 19:46:24 浏览数 (1)

我们在写前端表单页面的时候,为了更好的SEO,我们会使用form标签,但是我们经常的情况是:我们并不需要form标签的一些默认事件,比如:

1.form内只有一个input标签的话,回车会触发表单的提交事件

2.form没有写action的话,默认就是当前页面

3.from内的button标签如果没有设置 type="button"属性的话,那么点击该button会触发表单的提交事件

解决方案如下:

阻止1默认事件有两个解决方案:

  1.   添加一个隐藏的input框
  2.   绑定表单的提交事件,事件处理过程中写 return false

阻止3默认事件,建议非提交button填写type属性

在只有一个input框的情况下回车触发表单提交事件这个过程中的路径分析:

  1. 触发button的点击事件(该button是submit类型的)
  2. 触发表单的提交事件
  3. 表单提交

注意事项:

  •   在该过程中,可以在任何一步终止该路径
  • 并不是每一步都是必须的

0 人点赞