【报Bug】两个 input 使用 v-if 显示和销毁，focus会跳转到第一个input

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 3.6.4

手机系统： Android

手机系统版本号： Android 5.1

手机厂商： urovo pda

手机机型： i6300A

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template>  
    <view class="wrap">  
<input class="input"  type="text"></u-input>  
<input class="input"  type="text"></u-input>  
<input class="input" placeholder="条码" maxlength="-1"  :focus="hhFocus" type="text"  
                    @confirm="doHhSerech" v-if="inputView"></input>  

    </view>  
</template>  
<script>  
export default {  
data() {  
            return {  
                hhFocus: true,  
                hnumber: '',  
                inputView: true,  
            };  
        },  
methods: {  
doHhSerech(e) {  
                this.inputView = false;  
                this.hnumber = '';  
                this.hhFocus = true;  
                setTimeout(() => {  
                    this.inputView = true;  
                }, 200)  
}  
}  

}  
</script>  
<style scoped lang="scss">  
.input {  
        height: 70rpx;  
        position: relative;  
        font-size: 35rpx;  
        color: $u-main-color;  
        line-height: 70rpx;  
        flex: 1;  
        border-radius: 6rpx;  
        border-radius: 4px;  
        border: 1px solid $u-form-item-border-color;  

    }  
</style>

操作步骤：

<template>  
    <view class="wrap">  
<input class="input"  type="text"></u-input>  
<input class="input"  type="text"></u-input>  
<input class="input" placeholder="条码" maxlength="-1"  :focus="hhFocus" type="text"  
                    @confirm="doHhSerech" v-if="inputView"></input>  

    </view>  
</template>  
<script>  
export default {  
data() {  
            return {  
                hhFocus: true,  
                hnumber: '',  
                inputView: true,  
            };  
        },  
methods: {  
doHhSerech(e) {  
                this.inputView = false;  
                this.hnumber = '';  
                this.hhFocus = true;  
                setTimeout(() => {  
                    this.inputView = true;  
                }, 200)  
}  
}  

}  
</script>  
<style scoped lang="scss">  
.input {  
        height: 70rpx;  
        position: relative;  
        font-size: 35rpx;  
        color: $u-main-color;  
        line-height: 70rpx;  
        flex: 1;  
        border-radius: 6rpx;  
        border-radius: 4px;  
        border: 1px solid $u-form-item-border-color;  

    }  
</style>

预期结果：

聚焦到当前input中

实际结果：

聚焦到第一个input中

bug描述：

罗列多个input
当最后一个或除了第一个使用 v-if 控制先销毁再重组后光标会自动聚焦到第一个input，需要的是继续聚焦在当前的input内

inputBug.zip

2022-10-24 11:07 负责人:无分享

1 个回复

DCloud_UNI_WZF

切换input的时候，先把 foucs 变量重置试下，例如这样：

this.hhFocus = false;  
setTimeout(() => {    
    this.hhFocus = true;  
    this.inputView = true;    
}, 200)

AQASLAC (作者)

我不是要切换input，是要实现pda扫码，光标要一直停留在当前input中，目前是光标自己就跳到第一个input上了

2022-10-25 16:02
AQASLAC (作者)

以前的版本没有这个问题

2022-10-25 16:03
DCloud_UNI_WZF

回复 8***@qq.com: 那请提供一下测试工程，按你上面的描述及代码并未复现问题

2022-10-25 17:22
无敌啊啊

回复 8***@qq.com: 解决了吗我现在也遇到这个问题了

2022-11-23 16:36
AQASLAC (作者)

回复无敌啊啊: HB版本降到3.5.3试试

2023-11-28 16:39

该问题目前已经被锁定, 无法添加新回复

【报Bug】两个 input 使用 v-if 显示和销毁，focus会跳转到第一个input

预期结果：

聚焦到当前input中

实际结果：

聚焦到第一个input中

bug描述：

1 个回复

公告

相关问题

【报Bug】 两个 input 使用 v-if 显示和销毁，focus会跳转到第一个input

预期结果： 聚焦到当前input中

实际结果： 聚焦到第一个input中

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

【报Bug】两个 input 使用 v-if 显示和销毁，focus会跳转到第一个input

预期结果：

聚焦到当前input中

实际结果：

聚焦到第一个input中