移动端的 Vue3 项目，点击空白区域，input 监听到了 @blur 事件，但又没有失焦？

Question

      <input
        type="text"
        class="input-name"
        v-model="nickName"
        placeholder="ニックネームを入力"
        @focus="keyBoardOpen()"
        @blur="keyBoardClose()"
      />

当输入框处于输入法的单词联想时，此时点击空白区域，触发了 blur 监听，keyBoardClose() 事件也被正常调用了。但是该 Input 却没有失焦，keyBoardClose() 里的处理也没有被真正执行。

总之就是 blur 事件被触发了，但又没有真正触发。请问是因为什么？如何解决？

Answer 1

这个问题可能与移动端设备或者移动端输入法有关。在某些移动端设备或者输入法中，点击空白区域时，虽然触发了@blur事件，但实际上输入法仍然保持激活状态，因此输入框没有真正失焦。为了解决这个问题，你可以尝试在点击空白区域时主动让输入框失焦。你可以在Vue组件的<template>部分添加一个包裹整个组件的<div>，并在这个<div>上监听@click事件，当用户点击空白区域时，触发一个方法来手动失焦输入框。这里是一个示例：

<template>
  <div class="wrapper" @click="handleWrapperClick">
    <input
      type="text"
      class="input-name"
      v-model="nickName"
      placeholder="ニックネームを入力"
      @focus="keyBoardOpen"
      @blur="keyBoardClose"
      ref="inputName"
    />
    <!-- 其他组件内容 -->
  </div>
</template>

在Vue组件的<script>部分，添加handleWrapperClick方法，并通过this.$refs.inputName.blur()手动触发输入框失焦：

export default {
  methods: {
    keyBoardOpen() {
      // ...
    },
    keyBoardClose() {
      // ...
    },
    handleWrapperClick(event) {
      if (event.target !== this.$refs.inputName) {
        this.$refs.inputName.blur();
      }
    },
  },
};

这样，当用户点击空白区域时，输入框将被手动失焦，并执行keyBoardClose方法中的逻辑。请注意，这个解决方案在某些移动端设备和输入法中可能仍然存在兼容性问题。如果问题仍然存在，你可能需要调查并适配具体的设备和输入法。