uni-app input 第一次focus键盘闪退

uni-app input 第一次focus键盘闪退

开发环境 版本号 项目创建方式
Windows 1809 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：1809

HBuilderX类型：正式

HBuilderX版本号：3.1.4

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：华为

手机机型：都存在

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<template>  
    <view class="contain">  
        <text @tap="replyAnswer">回复</text>  
        <input :focus="isFocus" type="text"/>  
    </view>  
</template>  

<script>  
export default {  
    data () {  
        return {  
            isFocus: false,  
        };  
    },  
    methods: {  
        replyAnswer () {  
            this.isFocus = false  
            setTimeout(() => {  
                this.isFocus = true;  
            }, 200);  
        }  
    }  
};  
</script>

操作步骤：

正常进入页面

预期结果：

键盘弹起

实际结果：

键盘闪退

bug描述：

input设置fouce获取焦点，键盘会闪退


更多关于uni-app input 第一次focus键盘闪退的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

是必现的吗 还是有其他运行环境才能复现。目前使用HX3.1.6版本基座测试未发现问题

更多关于uni-app input 第一次focus键盘闪退的实战教程也可以访问 https://www.itying.com/category-93-b0.html


升级V3后出现的，70%概率出现

回复 别动那只喵: 确定是HX3.1.4版本吗。默认基座能复现吗

回复 DCloud_Android_ST: 是，可以复现

回复 别动那只喵: 猜测是某些限定条件才能复现问题。那麻烦请提供一下可复现问题的项目。附件或者邮箱 shutao@dcloud.io

回复 DCloud_Android_ST: 排查了一下，发现是禁用沉浸式导致的，配置statusbar的immersed为false。这个有办法解决吗

回复 DCloud_Android_ST: 更新了一下示例代码

回复 别动那只喵: 了解 后续会优化该问题

这是一个已知的 uni-app 在 Android 平台上的兼容性问题，主要出现在某些华为机型上。问题根源在于通过 v-model 或 :focus 动态切换焦点时，系统键盘会出现快速弹起又收起的情况。

解决方案：

  1. 使用 nextTick 延迟设置焦点
    将 setTimeout 替换为 this.$nextTick，确保 DOM 更新完成后再设置焦点：
replyAnswer () {
    this.isFocus = false;
    this.$nextTick(() => {
        this.isFocus = true;
    });
}
  1. 直接调用输入框的 focus 方法
    给 input 添加 ref，通过直接调用原生 focus 方法避免状态切换问题：
<input ref="inputRef" type="text"/>

replyAnswer () {
    this.$refs.inputRef.focus();
}
回到顶部