前端表单响应回车键的注意点

Jan 30 2019 Node.js 

1
2
3
4
5
6
7
<form @submit.prevent>
  <div>
    <label for="nickname">昵称</label>
    <input type="text" id="nickname" placeholder="输入账户昵称" v-model="nickname" required>
  </div>
  <button type="submit" :disabled="regLoading" @click="submit">{{regText}}</button>
</form>
  1. submit 事件的发生对象是form元素，而不是button元素，submit 事件会触发 submit button 的单击事件，而 submit button 单击事件会触发 form action，单击 submit 按钮也会直接触发 submit 事件。
  2. 当输入回车的时候，表单响应的可能是第一个 button 元素，即使这个按钮没有设置 submit 类型，如果表单有多个按钮，一定要注意，不是提交按钮应当设置 <button type="button">notSubmit</button>，而在提交按钮上设置 <button type="submit">Submit</button>
  3. 另外在实践中，需要响应回车键的同时，还需要组织浏览器的默认跳转（回车会自动跳转到 form action 属性的网址，没有就会自动刷新），我们只需要在 form submit 事件使用 preventDefault()，在 vue 中直接可以使用 <form @submit.prevent></form> 即可。