uni-app nvue input自动获取焦点，获取不到

uni-app nvue input自动获取焦点，获取不到

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
操作系统版本 win10
HBuilderX类型 正式
HBuilderX版本 3.3.5
手机系统 Android
手机系统版本 Android 11
手机厂商 OPPO
手机机型 OPPOa9
页面类型 nvue
Vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
    <view class="setPage">  
        <scroll-view scroll-y="true" class="content" :style="[{ height: height }]">  
            <text class="title" :style="[{ fontSize: rootFontSize * 0.85 }]">关键词列表</text>  
            <view class="keyword">  
                <view :class="['dv', long && (activeindex == index) ? 'cur' : 'curr']" v-for="(item, index) in list" :key="index">  
                    <view class="wrap" v-if="activeindex != index">  
                        <text class="word" :style="[{ fontSize: rootFontSize * 1.14 }]" @longpress="edit(index, item.keyId, item.keyContent)">{{ item.keyContent }}</text>  
                        <view class="del" @click="del(item.keyId)"><image class="delImage" src="../../static/images/del.png" mode=""></image></view>  
                    </view>  
                    <view class="else" v-if="activeindex == index">  
                        <input  
                            v-model="editKey"  
                            type="text"  
                            focus  
                            :clearable="false"  
                            @input="change(editKey)"  
                            @confirm="complete(editKey,item.keyId)"  
                            border="none"  
                            class="input"  
                        />  
                        <view class="right">  
                            <view @click.stop="conserve(item.keyId)">保存</view>  
                            <view @click.stop="editClose()">取消</view>  
                        </view>  
                    </view>  
                </view>  
            </view>  
        </scroll-view>  
    </view>  
</template>

操作步骤：

  • 长按列表的某一项

预期结果：

  • 输入框显示并自动获取焦点，弹出软键盘

实际结果：

  • 输入框显示，自动获取焦点，弹出软键盘，但是几秒之后软键盘隐藏失去焦点

bug描述：

  • 长按列表的某一项，输入框显示，自动获取焦点显示软键盘，但是几秒之后软键盘隐藏，失去焦点

更多关于uni-app nvue input自动获取焦点，获取不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点

更多关于uni-app nvue input自动获取焦点，获取不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的 谢谢

附上完整的代码文件，方便排查

项目地址 https://github.com/18438917513/nvue-input

在 nvue 中，input 的 focus 属性在动态渲染时可能因页面重绘导致焦点丢失。这通常与 scroll-view 的滚动、v-if 切换或异步渲染有关。

主要原因：

  1. scroll-view 在 nvue 中滚动时可能触发页面重新布局，导致焦点丢失。
  2. v-if 切换显示 input 时，组件可能未完全挂载就触发了 focus。
  3. Android 软键盘弹出可能影响页面布局，触发焦点事件重置。

解决方案：

  1. 使用 nextTick 延迟设置焦点：在 edit 方法中，通过 $nextTick 确保 DOM 更新后再手动触发焦点。

    edit(index, keyId, content) {
    this.activeindex = index;
    this.editKey = content;
    this.$nextTick(() => {
        // 手动触发 input 焦点
        this.$refs.inputRef?.focus();
    });
}

    在 input 上添加 ref="inputRef"。

  2. 避免 scroll-view 滚动干扰：检查是否在 input 显示时触发了滚动。可尝试在 input 显示时暂时禁用滚动：

    <scroll-view scroll-y="{{ !isEditing }}">

  3. 使用 setTimeout 作为备选方案：如果 nextTick 无效，可尝试短延迟：

    setTimeout(() => {
    this.$refs.inputRef?.focus();
}, 50);

  4. 检查 Android 软键盘配置：在 pages.json 中调整软键盘模式：

    {
    "app-plus": {
        "softinputMode": "adjustResize"
    }
}

代码调整示例：

  • 为 input 添加 ref：
    <input ref="inputRef" ... />
  • 修改 edit 方法：
    edit(index, keyId, content) {
    this.activeindex = index;
    this.editKey = content;
    this.$nextTick(() => {
        if (this.$refs.inputRef) {
            this.$refs.inputRef.focus();
        }
    });
}
回到顶部