el-input 按回车失去焦点

@keyup.enter.native="$event.target.blur()"

<el-input v-model="total" @keyup.enter.native="$event.target.blur()" placeholder="按回车失去焦点" />

✅ 原理说明

1. @keyup.enter 是什么？

这是 Vue 的按键修饰符语法，表示监听键盘抬起事件，并且只在按的是 Enter 键 时触发。

2. .native 是干什么的？

• <el-input> 是一个组件（不是原生 DOM 元素）；
• 默认情况下，@keyup.enter 不会冒泡到父组件；
• 加上 .native 后，表示监听的是该组件根元素上的原生 DOM 事件；

即：@keyup.enter.native 等价于监听 <input> 原生元素上的 keyup.enter 事件。

3. $event.target.blur() 是什么？

• $event.target 拿到当前触发事件的 DOM 元素（即 <input>）；
• .blur() 方法会让这个元素失去焦点；
• 效果就是：用户按回车 → 输入框失焦 → 触发 @blur 事件；

✅ 这种写法是否推荐？

在 el-input 中实现按回车键失去焦点，可以通过监听回车事件并手动触发 blur 方法。以下是两种实现方式：

方法 1：使用 @keyup.enter.native 和事件对象

1. 监听回车事件：使用 @keyup.enter.native 监听原生回车事件（.native 确保监听原生事件）。

2. 调用 blur 方法：在事件处理函数中，通过 event.target 获取输入框元素并调用 blur()。

html

复制

下载

运行

<el-input @keyup.enter.native="handleEnter" />

javascript

复制

下载

methods: {
  handleEnter(event) {
    event.target.blur(); // 直接让输入框失去焦点
  }
}

方法 2：通过 ref 获取输入框元素

1. 绑定 ref：给 el-input 绑定一个引用名（如 inputRef）。

2. 监听回车事件：同样使用 @keyup.enter.native。

3. 通过 ref 触发失焦：通过 this.$refs.inputRef 获取组件实例，再定位到内部的 input 元素。

html

复制

下载

运行

<el-input ref="inputRef" @keyup.enter.native="handleEnter" />

javascript

复制

下载

methods: {
  handleEnter() {
    // 通过 ref 获取输入框元素并失焦
    this.$refs.inputRef.$el.querySelector('input').blur();
  }
}

注意事项

• .native 修饰符：由于 el-input 是自定义组件，直接监听 @keyup.enter 可能无效，需添加 .native 监听原生事件。

• 兼容性：如果 Element UI 版本更新导致组件内部结构变化（例如 input 元素的路径不同），方法 2 可能需要调整选择器。此时方法 1 更稳定。

• 失去焦点的作用：失焦后，输入框会触发 blur 事件，可结合其他逻辑（如表单校验）。

总结

推荐 方法 1（直接通过 event.target.blur()），代码更简洁且依赖较少。若遇到 event.target 指向问题（如嵌套其他元素），再改用方法 2。