代码 让el-input获取焦点

可以通过调用 `focus()` 方法使 `el-input` 获取焦点，示例代码如下：

this.$refs.inputName.focus();

其中 `inputName` 是 `el-input` 组件的 ref 属性值，需要在 `el-input` 上添加 `ref` 属性，示例代码如下：

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

相关问题

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 ]

el-input获取焦点时清除

### 实现 `el-input` 组件获取焦点时清除内容

为了实现在 `el-input` 组件上当输入框获得焦点时自动清除其内容，可以监听该组件的 `focus` 事件并在此事件触发时重置绑定的数据模型。

<template>
  <div>
    <!-- 使用 @focus 监听器来处理聚焦事件 -->
    <el-input 
      v-model="inputValue" 
      placeholder="点击此处以清除内容"
      @focus="handleFocus">
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleFocus(event) {
      // 当元素被聚焦时立即设置v-model关联变量为空字符串从而达到清空效果
      this.inputValue = '';
    }
  }
};
</script>

上述代码展示了如何通过 Vue.js 的事件处理器机制，在用户点击进入输入框(`@focus`)的时候调用自定义的方法 `handleFocus()` 来执行清除操作[^1]。需要注意的是，这里并没有涉及到任何关于阻止默认行为的操作，因此不会影响到其他正常的交互体验如显示/隐藏下拉列表等特性[^2]。