el-input得到焦点

可以通过给`el-input`添加`ref`属性来获取该元素的引用，然后在需要获取焦点的时候，调用该元素的`focus()`方法，如下所示：

<template>
  <div>
    <el-input ref="myInput"></el-input>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus();
    }
  }
}
</script>

上面的代码中，我们给`el-input`元素添加了`ref="myInput"`属性，然后在`focusInput`方法中，通过`this.$refs.myInput`获取到该元素的引用，最后调用`focus()`方法使其获得焦点。

在需要触发获取焦点的时候，我们可以在对应的事件中，调用`focusInput()`方法即可。

相关问题

el-input获取焦点 input输入框为空时高亮 el-input值非法时

要实现你所说的功能，可以使用以下步骤：

1. 给 el-input 组件添加 ref 属性，这样可以在代码中通过 this.$refs.input 获取到 el-input 组件实例。

<el-input ref="input"></el-input>

2. 监听 el-input 组件的 focus 事件，在 focus 事件处理函数中判断 el-input 是否为空，如果为空，则添加一个高亮样式。

this.$refs.input.$on('focus', () => {
  if (!this.$refs.input.value) {
    this.$refs.input.$el.classList.add('highlight')
  }
})

3. 监听 el-input 组件的 blur 事件，在 blur 事件处理函数中移除高亮样式。

this.$refs.input.$on('blur', () => {
  this.$refs.input.$el.classList.remove('highlight')
})

4. 监听 el-input 组件的 input 事件，在 input 事件处理函数中判断 el-input 的值是否合法，如果不合法，则添加一个错误样式。

this.$refs.input.$on('input', () => {
  if (this.$refs.input.value && !isValid(this.$refs.input.value)) {
    this.$refs.input.$el.classList.add('error')
  } else {
    this.$refs.input.$el.classList.remove('error')
  }
})

5. 根据需要，定义高亮和错误样式的 CSS 样式。

.highlight {
  border-color: #409eff;
}

.error {
  border-color: #f56c6c;
}

el-input获取焦点

要使el-input获取焦点，可以使用自定义指令来实现。在elementUI中，可以通过以下方式实现el-input自动获取焦点并选中输入框里面的值：

1. 使用自定义指令实现：

<el-input type="text" ref="inputName" v-model="name" v-focus></el-input>

directives: {
  focus: {
    inserted: el => {
      el.querySelector('input').focus(); // 获取焦点
      el.querySelector('input').select(); // 选中文字
    }
  }
},

这样，el-input在渲染后会自动获取焦点并选中输入框里面的值。

2. 全局注册自定义指令：
在main.js中添加以下代码：

Vue.directive('focus', {
  inserted(el) {
    el.querySelector('input').focus(); // 获取焦点
  }
});

然后在el-input上使用v-focus指令即可：

<el-input type="text" ref="inputName" v-model="name" v-focus></el-input>

3. 局部注册自定义指令：
在组件中的directives选项中注册自定义指令：

directives: {
  focus: {
    mounted(el) {
      el.children\[0\].focus(); // 获取焦点
    }
  }
},

然后在el-input上使用v-focus指令即可：

<el-input type="text" ref="inputName" v-model="name" v-focus></el-input>

以上是三种常见的实现el-input获取焦点的方法，你可以根据具体情况选择其中一种来使用。
#### 引用[.reference_title]
- *1* [el-input自动获取焦点并选中值](https://blog.csdn.net/qq_38157825/article/details/115916895)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue 中使用input和el-input自动获取焦点的问题](https://blog.csdn.net/mygalssheart/article/details/103080625)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [【vue3】el-input 的获取焦点——el挂载：自定义指令，focus使 input 获取焦点（el-input 的Input Methods...](https://blog.csdn.net/qinglingLS/article/details/117536589)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]