uni-app input输入框自动聚焦或js控制聚焦后无法输入

uni-app input输入框自动聚焦或js控制聚焦后无法输入

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

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

HBuilderX类型：

正式

HBuilderX版本号：

3.1.13

手机系统：

Android

手机系统版本号：

Android 7.1.1

手机厂商：

夜神模拟器(Android7.0.1)、商米收银机(Android7.1.2)

页面类型：

vue

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

  1. input框失去焦点后，通过再次js控制聚焦
<template>  
    <input type="text" :value="val" :autoFocus='true' :focus="csFocus" @blur="csFocus=false" placeholder="测试" />  
    <button @click="csFocus=true">聚焦</button>  
</template>  
<script>  
data() {  
    return {  
        val: '',  
        csFocus: true  
    };  
}  
</script>
  1. 打开弹窗，弹窗内input自动聚焦
<template>  
    <button @click="show=true">显示弹窗</button>  
    <u-popup v-model="show" mode="center">  
        <view style="padding:50px;">  
            <input type="text" :value="val" :autoFocus='true'  placeholder="测试" />  
        </view>  
    </u-popup>  
</template>  
<script>  
data() {  
    return {  
        val: ''  
    };  
}  
</script>

预期结果：

input框自动聚焦或js控制聚焦后就能输入内容

实际结果：

input框自动聚焦或js控制聚焦后无法输入，需要点击input框才能输入

bug描述：

  1. input失去焦点后，通过js控制再次聚焦后无法输入
  2. 弹窗内的input自动聚焦无法输入

更多关于uni-app input输入框自动聚焦或js控制聚焦后无法输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请问解决了吗，我得也是这样

更多关于uni-app input输入框自动聚焦或js控制聚焦后无法输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题解决了吗 好像是uni的bug H5是正常的 app端有问题

这是一个在 uni-app 中常见的输入框聚焦问题，通常与 Android 系统及 uni-app 的渲染机制有关。以下是针对你描述情况的解决方案：

问题分析：

  1. 在 Android 系统中，输入框的聚焦和软键盘管理存在时序问题
  2. 弹窗组件会创建新的渲染层，可能打断原有的聚焦流程
  3. uni-app 的 focus 属性在某些场景下需要延迟执行

解决方案：

1. 对于手动控制聚焦的情况：

// 使用 $nextTick 确保 DOM 更新完成
<template>
    <input type="text" :value="val" :focus="csFocus" @blur="onBlur" placeholder="测试" />
    <button @click="handleFocus">聚焦</button>
</template>

<script>
export default {
    data() {
        return {
            val: '',
            csFocus: true
        };
    },
    methods: {
        handleFocus() {
            this.csFocus = false;
            this.$nextTick(() => {
                this.csFocus = true;
            });
        },
        onBlur() {
            this.csFocus = false;
        }
    }
}
</script>

2. 对于弹窗内自动聚焦的情况：

<template>
    <button @click="showPopup">显示弹窗</button>
    <u-popup v-model="show" mode="center" @open="onPopupOpen">
        <view style="padding:50px;">
            <input type="text" :value="val" :focus="popupFocus" placeholder="测试" />
        </view>
    </u-popup>
</template>

<script>
export default {
    data() {
        return {
            val: '',
            show: false,
            popupFocus: false
        };
    },
    methods: {
        showPopup() {
            this.show = true;
        },
        onPopupOpen() {
            // 弹窗完全打开后再设置聚焦
            setTimeout(() => {
                this.popupFocus = true;
            }, 300);
        }
    }
}
</script>
回到顶部