uni-app nvue页面input textarea获得焦点后点击其他区域无法失去焦点

uni-app nvue页面input textarea获得焦点后点击其他区域无法失去焦点

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
3.3.0

手机系统：
Android

手机系统版本号：
Android 12

手机厂商：
华为

手机机型：
红米k40

页面类型：
vue

vue版本：
vue2

打包方式：
云端

示例代码：
在nvue页面写一个input组件

操作步骤：
在nvue input获取焦点键盘弹出后点击其他位置input不会失去焦点，键盘也不会收回

预期结果：
在nvue input获取焦点键盘弹出后点击其他位置input不会失去焦点，键盘也不会收回

实际结果：
在nvue input获取焦点键盘弹出后点击其他位置input不会失去焦点，键盘也不会收回

bug描述：
在nvue input获取焦点键盘弹出后点击其他位置input不会失去焦点，键盘也不会收回


更多关于uni-app nvue页面input textarea获得焦点后点击其他区域无法失去焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这个玩意儿需要控制。 这算是bug也不算，前两年我用这个玩意儿的时候也存在的。 当时解决方案就是，弄一个大背景将输入框定位，放到大背景中点击大背景则控制键盘隐藏等。

更多关于uni-app nvue页面input textarea获得焦点后点击其他区域无法失去焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html


又是个常年不休的bug

这是一个已知的nvue页面常见问题，主要原因是nvue的渲染机制与vue页面不同。在nvue中，input/textarea组件获得焦点后，点击页面其他区域不会自动触发失焦事件。

解决方案：

  1. 手动绑定失焦事件 在页面根元素或需要触发失焦的区域添加@tap事件，手动调用blur()方法：

    <template>
  <view @tap="handlePageTap">
    <input ref="myInput" [@focus](/user/focus)="onFocus" />
  </view>
</template>

<script>
export default {
  methods: {
    handlePageTap() {
      if (this.$refs.myInput) {
        this.$refs.myInput.blur()
      }
    },
    onFocus() {
      // 记录焦点状态
      this.hasFocus = true
    }
  }
}

  2. 使用@blur事件监听 确保input组件已绑定@blur事件，虽然这不能解决自动失焦问题，但可以配合手动失焦使用。

  3. 针对textarea的特别处理 如果使用textarea，同样需要手动处理：

    <textarea ref="myTextarea" [@focus](/user/focus)="onFocus" />
回到顶部