设置input输入框聚焦在uni-app中软键盘弹出但无光标直接点击软键盘无法输入

设置input输入框聚焦在uni-app中软键盘弹出但无光标直接点击软键盘无法输入

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 12.3
HBuilderX类型 正式
HBuilderX版本号 4.66
手机系统 全部
手机厂商 华为
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

测试过的手机

华为matepad harmonyos 4.2.0

示例代码：

<button @click="toFocus">按钮</button>  
toFocus() {  
    this.isFocus=true;  
}

操作步骤：

  • 输入框默认不聚焦，点击按钮设为聚焦

预期结果：

  • 点击按钮设为聚焦后软键盘弹出，光标显示可直接输入

实际结果：

  • 点击按钮设为聚焦后软键盘弹出，光标未显示，不可输入

bug描述：

点击按钮input输入框聚焦，软键盘弹出但无光标，直接点击软键盘无法输入


更多关于设置input输入框聚焦在uni-app中软键盘弹出但无光标直接点击软键盘无法输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

看一下你完整的代码实现，包含 input 部分

更多关于设置input输入框聚焦在uni-app中软键盘弹出但无光标直接点击软键盘无法输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在uni-app中常见的软键盘与输入框焦点同步问题。根据你提供的信息，问题可能出现在以下几个方面：

核心问题分析

  1. 焦点设置方式不完整 - 仅设置isFocus=true可能无法正确触发输入框的聚焦状态
  2. 异步渲染问题 - Vue的数据响应式更新与DOM操作可能存在时序差异
  3. 软键盘兼容性问题 - 华为HarmonyOS在某些版本下存在软键盘焦点同步的兼容性问题

解决方案

方案一：使用$nextTick确保DOM更新后聚焦

toFocus() {
    this.isFocus = true;
    this.$nextTick(() => {
        this.$refs.inputRef.focus();
    });
}

方案二：直接操作DOM元素聚焦

toFocus() {
    const input = this.$refs.inputRef;
    if (input) {
        input.focus();
    }
}

方案三：添加延迟确保软键盘完全弹出

toFocus() {
    this.isFocus = true;
    setTimeout(() => {
        this.$refs.inputRef?.focus();
    }, 100);
}

完整示例代码

<template>
    <view>
        <input 
            ref="inputRef"
            :focus="isFocus"
            placeholder="请输入内容"
        />
        <button @click="toFocus">聚焦输入框</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isFocus: false
        }
    },
    methods: {
        toFocus() {
            this.isFocus = true;
            this.$nextTick(() => {
                this.$refs.inputRef.focus();
            });
        }
    }
}
</script>
回到顶部