form表单input按回车键默认submit的情况

---

title: form表单input按回车键默认submit的情况
date: 2017-11-02 10:28:48
categories:
tags:
icon: fa-form

---

[TOC]

一、先说事件处理的几种方式（no jQuery）

1.事件属性

2.javascript添加属性

通过js添加的事件会覆盖已经存在的事件。(类似一个属性的修改)

3.javascript事件监听

通过addEventListener()添加的s事件不会覆盖已存在到的事件；通过removeEventListener()可以移出添加的事件

二、重现情况

情况1.只有一个input：input回车会submit

情况2.一个或多个input和一个或多个button：input回车会submit

  
  
  btn1
  btn2

注意：form中button默认type=‘submit’，所以点击button会submit

情况3.一个或多个input和一个或多个input(type='submit')：input回车会submit

由2和3可知：form中下面三种表单控件（按钮）是等效的

• btn
• btn

三、重现总结

在input中回车会submit：

1. 如果form中只有一个input；
2. 如果form中有submit类型的按钮；

四、解决方法

对于情况1

1. 添加隐藏的input：

2. 阻止input回车默认事件

3. 阻止form的默认submit提交事件

对于情况2和情况3

如果采用阻止默认的submit事件（如下），即使点击btn3也不会submit了，这不是我们想要的。

  
  
  btn1
  btn2
  btn3

方法：给form里面的所有input的onkeydown事件取消默认操作

  
  
  btn1
  btn2
  

四、总结

1. 给按钮添加type属性，明确意图，可以避免跳坑
2. 尽量用ajax提交表单信息，尽量避免form提交
3. 通过上面的比较，阻止事件中e.preventDefault()相比return false在上述所有情况下均适用。