1***@qq.com
1***@qq.com
  • 发布:2023-03-20 16:14
  • 更新:2023-05-09 09:38
  • 阅读:387

【报Bug】input设置focus后,打包安装后输入框出现变形,并且只弹出软键盘,没有光标锁定输入框。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: 正式

HBuilderX版本号: 3.7.3

手机系统: Android

手机系统版本号: Android 11

手机厂商: iDate

手机机型: T2

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="container">  
        <text class="example-info">标签扫描区:</text>  

        <view class="uni-form-item uni-column" style="position: relative;">  

            <input class="uni-input" auto-focus="true" v-model="key" @input="inputKey"    
            @confirm="doSearch" style="width: 90%;height: 70rpx;border: #ebebeb solid 1rpx;margin-left:10rpx"/>  
            <view class="uni-icon uni-icon-clear clear-self" v-if="showClearIcon" @click="clearIcon"></view>  
        </view>  
        <br>  
        <tui-toast ref="toast"></tui-toast>  
    </view>  
</template>  

<script>  
    import {  
        isOpen,  
        openSqlite,  
        createTables,  
        insertMain,  
        insertChild,  
        selectData,  
        updateData,  
        deleteData,  
        commonSql  
    } from '@/js_sdk/yxt-sqlite/sqlserver.js';  
    export default {  
        mounted: function() {  
            // this.load();  
        },  
        data() {  
            return {  
                key: '',  
                start: 0,  
                limit: 10,  
                control:0,  
                showClearIcon:false  
            }  
        },  
        onLoad:function(){  
            // this.clearInput()  
        },methods: {  
            inputKey: function(e) {  

            },  
            doSearch: function(e) {  

                let that=this;  

                 console.log(e.detail.value);  
                 var key=e.detail.value.replace(/\s/g,"");  
                 console.log("key=========="+key);  

                this.control=0;  

                // var isOpenFlag =  isOpen();  
                // if(!isOpenFlag){  
                //  openSqlite()  
                // }  
                // var where = ''  
                if(key){  
                    console.log("key=========="+key);  
                    let params = {  
                        funid: 'lubr_done',  
                        pagetype: 'form',  
                        eventcode: 'scan',  
                        user_id: uni.getStorageSync("userinfo")["user_id"],  
                        dataType: 'json',  
                        result:key  
                    }  
                    console.log("params=========="+params)  
                    that.tui.request('post',params, true, true).then((res) => {  
                        this.key=key;  
                        console.log(res)  
                         //res=eval('(' + res + ')')  
                         console.log(res.data)  
                         if(res.data.lubr_done_id!=undefined){  
                            uni.navigateTo({  
                                url: './lubr_list' + '?lubr_done__lubr_done_id=' + res.data.lubr_done_id+'&show_data=2'  
                            });    
                             }else{  
                            uni.showToast({ title: "未找到此设备对应的未润滑记录!", icon: "none" });  

                            return;  
                         }  

                    }).catch((e) => {});  
                }  
                // uni.navigateTo({  
                //  url: './device_download_form'  
                // })  

            },  
            back() {  
                uni.navigateBack({  
                    delta: 1  
                })  
            },  
            save() {      
            },  
        }  
    }  
</script>  

<style>  
    @import '@/common/uni.css';  
    @import '@/static/style/thorui.css';  
    .clear-self{  
        position: absolute;  
        top: 35rpx;  
        right: 10rpx;  
    }  

    .example-info {  
        padding: 15rpx;  
        color: #3b4144;  
        /* background: #ffffff; */  
    }  
    .tui-login-from {  
        width: 100%;  
        padding: 128upx 104upx 0 104upx;  
        box-sizing: border-box;  
    }  
    .tui-input {  
        width: 100%;  
        border: 0.5rpx solid #5677fc;  
        font-size: 52upx;  
        flex: 1;  
        display: inline-block;  
        padding-left: 32upx;  
        padding-right: 32upx;  
        box-sizing: border-box;  
        overflow: hidden;  
    }  
    .tui-btn-primary {  
        width: 90%;  
        height: 90rpx;  
        line-height: 90rpx;  
        background: linear-gradient(-90deg, #5677fc, #5c8dff);  
        border-radius: 10rpx;  
        color: #fff;  
        font-size: 36rpx;  
    }  
    .tui-btn-submit {  
        margin-top: 60upx;  
    }  
</style>

操作步骤:

云打包后,下载安装。打开对应APP页面。

预期结果:

有光标锁定输入框并弹出软键盘。

实际结果:

有时符合预期有光标锁定输入框并弹出软键盘。
有时不符合预期没有光标锁定输入框,已弹出软键盘。

bug描述:

input设置focus后,打包安装后输入框出现变形,并且只弹出软键盘,没有光标锁定输入框。另一款Redmi Note 10 Pro的机型也是一样的问题。

2023-03-20 16:14 负责人:DCloud_Android_YJC 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

来人呀,DDDD

1***@qq.com

1***@qq.com (作者)

注意调试运行的时候都是正常的,打包安装后,第一次打开大概率也是正常的。后面切换应用、重启手机等动作后打开。就可能复现异常。异常之后打开就一直是异常的。重新安装后可能正常,可能异常。

  • DCloud_Android_YJC

    提供一个安装包链接,我把你的代码放到测试工程中,云打包后也没复现。

    2023-03-21 12:01

  • 1***@qq.com (作者)

    回复 DCloud_Android_YJC: 请问 手机上把调试安装的HBuilder X基座卸载,是否可以复现?

    2023-03-21 16:29

  • DCloud_Android_YJC

    回复 1***@qq.com: 没有,你那边能复现的安装包发我一下,我再试试

    2023-03-22 11:23

1***@qq.com

1***@qq.com (作者)

之前调试的时候都会有这个问题,后面修复了。但打包又有问题,已经很长时间了。这个问题很影响用户使用,请求大哥们帮助,谢谢!

黑咖

黑咖

大佬解决了吗?3.7.11还是不行

  • 1***@qq.com (作者)

    没有解决,但是清理app内存数据会恢复,先这样子用吧。他这个问题偶尔就会有,也不知道怎么复现的。

    2023-06-14 11:04

  • g***@gmail.com

    回复 1***@qq.com: 你好,这个问题解决了吗,我也遇到了这个问题

    2025-03-22 17:16

要回复问题请先登录注册