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]。

相关问题

el-input中clear如何不触发click事件

要实现在el-input中点击清除按钮不触发click事件，可以使用以下方法：

1. 使用 @mousedown.prevent 替代 @click 事件来禁止默认行为。如下所示：

<el-input v-model="input" clearable @mousedown.prevent="clearInput"></el-input>

methods: {
  clearInput() {
    this.input = '';
  }
}

2. 在方法中使用 $refs 获取清除按钮元素，并使用 .blur() 方法使其失去焦点。如下所示：

<el-input v-model="input" clearable @click="clearInput"></el-input>

methods: {
  clearInput() {
    this.$refs.input.$refs.clearable.blur();
    this.input = '';
  }
}

这样就可以实现在点击清除按钮时不触发click事件。

el-autocomplete 聚焦

el-autocomplete 聚焦的问题可能是由于使用了 clearable 属性导致的。根据引用\[3\]的描述，当点击清除图标后，如果已经是聚焦状态，再次点击输入框时下拉框不会再显示。这可能是因为清除图标的点击事件会导致输入框失去焦点，从而不再显示下拉框。解决这个问题的方法是在清除图标的点击事件中手动将输入框聚焦，可以使用 ref 属性来获取 el-autocomplete 组件的实例，然后调用其 focus 方法来实现聚焦。
#### 引用[.reference_title]
- *1* [【ElementUI】el-autocomplete 远程搜索自动填充](https://blog.csdn.net/wuli_youhouli/article/details/124673271)[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^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue点击input框弹出autocomplete框自动获取焦点](https://blog.csdn.net/lovezhuer1/article/details/104498347)[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^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）](https://blog.csdn.net/weixin_42190844/article/details/120768467)[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^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]