Ionic Vue中ion-input失去焦点后键盘不隐藏怎么办？

ლ樱潼提问于 2026-02-18 00:41:25 阅读 93

移动

我在用Ionic 6和Vue 3开发移动端表单时遇到个问题，输入框失去焦点后软键盘没有自动收起。尝试给ion-input绑定了blur事件并调用Ionic的hide方法，但键盘还是卡着不消失：


<template>
  <ion-input 
    @ionBlur="closeKeyboard" 
    placeholder="请输入内容"></ion-input>
</template>

<script>
import { hideKeyboard } from '@ionic/vue';

export default {
  methods: {
    closeKeyboard() {
      hideKeyboard();
    }
  }
}
</script>

测试时在Android真机上，点击页面其他区域可以收起键盘，但直接点输入框外的空白处无效。控制台没报错，但感觉事件绑定可能有问题，试过用@blur原生事件也不行。有没有遇到过类似情况的大佬？

我来解答赞 18 收藏

反馈

1 条解答

IT人尚勤 Lv1

Ionic的hideKeyboard方法在某些Android场景下确实不太靠谱。直接监听document的点击事件强制收起键盘更稳妥：

mounted() {

  document.addEventListener('click', this.closeKeyboard);

},

methods: {

  closeKeyboard() {

    document.activeElement.blur();

  }

}

记得在组件销毁时移除事件监听，不然容易内存泄漏。

2026-02-18 01:00