uni-app 点击其他区域键盘不会收起

uni-app 点击其他区域键盘不会收起

开发环境 版本号 项目创建方式
Windows windows7 HBuilderX 
### 操作步骤：
* 点击input打开软键盘
* 点击其他区域

### 预期结果：
点击input打开软键盘后，点击其他区域键盘收起

### 实际结果：
点击input打开软键盘后，点击其他区域键盘不会收起

### bug描述：
点击input打开软键盘后，点击其他区域键盘不会收起，官方示例的app里试了下也不行
1 回复

更多关于uni-app 点击其他区域键盘不会收起的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题在 uni-app 开发中比较常见，尤其是在 App 端。主要原因是 uni-app 的 input 组件在 App 端默认不会自动失去焦点，导致键盘无法收起。

核心解决方案：

  1. 使用 blur 方法（推荐）
    在页面的根元素（如 view）上绑定 @tap 事件，触发时手动调用 input 的 blur 方法。

    <template>
  <view @tap="handleTapOutside">
    <input ref="myInput" v-model="value" />
  </view>
</template>
<script>
export default {
  methods: {
    handleTapOutside() {
      this.$refs.myInput.blur();
    }
  }
}
</script>

  2. 使用 uni.hideKeyboard()
    在全局点击事件中调用 API 强制隐藏键盘：

    uni.hideKeyboard();

  3. App 端特定配置（仅限原生渲染）
    在 pages.json 中配置页面样式：

    {
  "style": {
    "app-plus": {
      "softinputMode": "adjustResize"
    }
  }
}
回到顶部