uni-app input 组件自动聚焦问题(有光标闪烁 但键盘不拉起)

uni-app input 组件自动聚焦问题(有光标闪烁 但键盘不拉起)

操作步骤：

页面 A 有 input search 框, 跳转到 页面 B 再跳转到 页面 C，然后一步步返回页面 A。

预期结果：

页面 A 保持原样。

实际结果：

页面 A input 必定自动聚焦(有光标闪烁, 但键盘不拉起)。

bug描述：

input 组件自动聚焦(有光标闪烁, 但键盘不拉起)。全部 nvue 页面。


| 信息类别         | 内容                           |
|------------------|-------------------------------|
| 产品分类         | uniapp/App                    |
| PC开发环境       | Mac                           |
| PC开发环境版本   | 11.4 (20F71)                  |
| HBuilderX类型    | Alpha                         |
| HBuilderX版本    | 3.1.21                        |
| 手机系统         | Android                       |
| 手机系统版本     | Android 9.0                   |
| 手机厂商         | 模拟器                        |
| 手机机型         | Pixel_3a_API_30_x86           |
| 页面类型         | nvue                          |
| 打包方式         | 云端                          |
| 项目创建方式     | HBuilderX                     |

更多关于uni-app input 组件自动聚焦问题(有光标闪烁 但键盘不拉起)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这是必现简单示例

更多关于uni-app input 组件自动聚焦问题(有光标闪烁 但键盘不拉起)的实战教程也可以访问 https://www.itying.com/category-93-b0.html


楼主结局了吗

这是一个在 uni-app nvue 页面中比较常见的页面栈管理问题。当页面经过多层跳转后返回时，input 组件可能会错误地触发自动聚焦状态，但键盘并未正常拉起。

问题原因： 在 Android 平台的 nvue 页面中，页面返回时 input 组件的焦点状态可能被错误恢复。虽然显示了光标闪烁，但由于页面生命周期或焦点管理机制的问题，系统键盘未能同步激活。

解决方案：

  1. 在页面 A 的 onShow 生命周期中手动处理焦点：
onShow() {
    // 强制移除 input 焦点
    this.$nextTick(() => {
        const input = this.$refs.inputRef;
        if (input && input.blur) {
            input.blur();
        }
    });
}
  1. 使用条件渲染控制 input 显示：
<template>
    <view>
        <input v-if="showInput" ref="inputRef" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            showInput: false
        }
    },
    onShow() {
        this.showInput = true;
    },
    onHide() {
        this.showInput = false;
    }
}
</script>
回到顶部