uni-app nvue页面input输入框在获取焦点弹出键盘后 点击其他地方或空白处无法失去焦点 并且软键盘无法收起

uni-app nvue页面input输入框在获取焦点弹出键盘后 点击其他地方或空白处无法失去焦点 并且软键盘无法收起

测试过的手机

ios12,ios12 pro max, 华为mate40,华为p40,华为nova5,小米k40,小米10

示例代码：

<input type="text" v-model="texts" placeholder="输入"/>

操作步骤：

<input type="text" v-model="texts" placeholder="输入"/>

预期结果：

在input获取焦点后，点击空白处或页面其他元素会失去焦点，并且软键盘会消失

实际结果：

在input获取焦点后，点击空白处或页面其他元素不会失去焦点，并且软键盘不会消失

bug描述：

nvue页面input输入框在获取焦点弹出键盘后，点击其他地方或空白处，无法失去焦点，并且软键盘无法收起


| 信息类型         | 信息详情       |
|------------------|----------------|
| 产品分类         | uniapp/App     |
| PC开发环境操作系统 | Windows        |
| PC开发环境操作系统版本号 | win10          |
| HBuilderX类型    | 正式           |
| HBuilderX版本号  | 3.1.12         |
| 手机系统         | 全部           |
| 手机厂商         | 华为           |
| 页面类型         | nvue           |
| 打包方式         | 云端           |
| 项目创建方式     | HBuilderX      |

更多关于uni-app nvue页面input输入框在获取焦点弹出键盘后 点击其他地方或空白处无法失去焦点 并且软键盘无法收起的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

是的都好久了，这个问题都还有，只有不使用nvue 用vue先代替这个界面了 要不实在不行就只有在需要的地方 手动调用 this.$refs.input.blur() 失去焦点和 this.$refs.input.focus() 聚焦

更多关于uni-app nvue页面input输入框在获取焦点弹出键盘后 点击其他地方或空白处无法失去焦点 并且软键盘无法收起的实战教程也可以访问 https://www.itying.com/category-93-b0.html


点击其他地方关闭软键盘uni.hideKeyboard()

我也碰到了！！不能失去焦点！

有解决了的嘛，我也碰到了，this.$refs.input.blur() 这个方法试了好像也没效果

恶心啊，啥时候能解决

有人解决了吗，又遇到这个问题了

解决了吗

都12月还没有官方来关注这个问题，挺严重的bug啊

@touchend.prevent 在使用this.$refs.inputRef.blur()。 就可以

这是一个在 nvue 页面中比较常见的焦点管理问题。由于 nvue 的渲染机制与 vue 页面不同，input 组件在某些情况下确实会出现焦点无法正常失去的情况。

解决方案：

  1. 使用 blur 方法主动失去焦点 在页面的其他地方添加 @click 事件，通过 ref 获取 input 实例并调用 blur 方法：
<template>
  <view @click="handlePageClick">
    <input ref="myInput" type="text" v-model="texts" placeholder="输入"/>
  </view>
</template>

<script>
export default {
  methods: {
    handlePageClick() {
      this.$refs.myInput.blur()
    }
  }
}
</script>
  1. 使用 hideKeyboard 方法 在页面点击事件中直接调用 uni.hideKeyboard()：
methods: {
  handlePageClick() {
    uni.hideKeyboard()
  }
}
回到顶部