ElementUI input输入、button enter回车事件

本文介绍: 1、Elem entUI el–input 点击回车会导致页面刷新，输入内容丢失；2、el-button 点击后，再次按回车会重复触发；3、如何实现多个输入框回车触发同一个事件

本文 解决 问题

1、ElementUI el-input 点击回车会导致页面刷新，输入内容丢失；
2、el-button 点击后，再次按回车会重复触发；
3、如何实现多个输入框回车触发同一个事件

1、问题 原因：

W3C 标准中有如下规定：

When there i s only one s in gle-line text input field in a form, the user agent sh o ul d accept Enter in that field a s a request to su b m it the form.

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。

解决办法：

可以在标签上添加 @su b m it.native.pr event。

<el-form @submit.native.prevent&gt;

.native 表示对一个组件绑定系统原生事件
.p r event 表示阻止浏览器的默认事件

2、问题 原因：

el-button 点击不会自动失去焦点，所以这个时候按下回车会再次触发按钮绑定的事件

解决办法：

<el-button type="primary" @click="searchAction"&gt;搜索</el-button&gt;

searchAction(e) {
    ......
    ......
    /// 获取对象
    let target = e.target
    if (target.nodeName === 'SPAN' || target.nodeName === 'I') {
      target = e.target.parentNode;
    }
    // 让其失去焦点
    target.blur();
}

3、如何在完成某个输入后，键盘回车自动触发 查询 事件？

解决办法：使用 按键 修饰符

<input type="text" @keyup.enter="handleQuery">

const handleQuery = ()=> {
   console.log('handleQuery')
}

4、多个 输入框，如何 实现 输入后回车调用 事件？

场景：比如通过条件查询个人信息，输入选项有：身高，年龄，班级…

可以多个条件叠加在一起，也可以只输入某一项，但无论输入那个输入框，只要回车都需要去做查询

解决办法一：可以 使用 问题3，但如果输入框特别多，改动就很大，就很麻烦

解决办法二：使用配合

原代码

  <div class="login">
    <div class="form-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="年龄"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="formInline.age" placeholder="性别"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="formInline.grade" placeholder="班级"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>

/// 修改el-form，把el-button的@click事件onSearch绑定上
<el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent="() => onSearch()">
/// 修改el-button的@click事件，将其删除，并新增native-type="submit"
<el-button type="primary" native-type="submit">查询</el-button>