2***@qq.com
2***@qq.com
  • 发布:2020-05-17 18:56
  • 更新:2020-05-17 18:56
  • 阅读:746

【报Bug】 使用Hbuilder 2.6.16版本打包后,APP输入框 软键盘会弹起 ,2.6.5没有这个问题,代码都一模一样,和手机型号没有关系。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.6.16

手机系统: Android

手机系统版本号: Android 9.0

手机厂商: 三星

手机机型: 三星A10

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
login.vue  

<view>  
    <view class="lg-main">  
        <view class="u-f-sbc">  
            <view class="lg-title" style="margin-top: 80upx;font-size: 44upx;color: #384A65;">{{title1}}</view>  
            <view class="lg-title" style="margin-top: 80upx;font-size: 30upx;" @click="changeLoginType()">  
                <text style="border: solid 2upx #21C2BC;font-size: 25upx;font-weight:bold;padding: 10upx;border-radius: 5upx;">切换登录方式</text>  
            </view>  
        </view>  
        <view class="">  
            <view class="lg-input2" style="">  
                <input type="text" v-model="account" class="lg-it-c2" placeholder="输入手机号/邮箱地址" placeholder-style="color:#B8C0C9;font-size:32upx;"/>  
            </view>  
            <view class="lg-input2">  
                <input type="text" password="true" v-model="pwd"   
                class="lg-it-c2" placeholder="输入登录密码"   
                placeholder-style="color:#B8C0C9;font-size:32upx;"  
                @confirm="handleLogin()"  
                />  
            </view>  
        </view>  
    </view>  
    <view class="for-lg u-f-c">  
        <view class="forget-pwd u-f u-f-ac" @tap="goForget">  
            <image src="/static/image/user/forget.png"></image>  
            <text>忘记密码</text>  
        </view>  
        <view class="login-bs u-f-c u-f-ajc">  
            <view class="u1"><button class="btn1" :class="{loginok:loginok}" @tap="handleLogin()" :loading="loading" :disabled="disabled">登录</button></view>  
            <view class="u1"><button class="btn2" hover-class="hc2" @tap="goReg">注册</button></view>  
        </view>  
    </view>  
</view>
login.css  

.for-lg{  
    position: fixed;  
    bottom: 80upx;  
}  
.forget-pwd{  
    margin-left: 56upx;  
    margin-bottom: 40upx;  
}  
.forget-pwd>image{  
    width: 36upx;  
    height: 42upx;  
    vertical-align: middle;  
    margin-right: 16upx;  
}  
.forget-pwd>text{  
    color: #21C2BC;  
    font-size: 26upx;  
}  
.login-bs{  
    width: 100%;  
}  
.btn1,.btn2{  
    width: 99vw;  
    margin-bottom: 40upx;  
    font-weight: bold;  
    font-size: 34upx;  
}  
.btn1{  
    color: #FFFFFF;  
    background-color: #ced4da;  
}  
.loginok{  
    background-color: #21C2BC !important;  
    color: #FFFFFF !important;  
}  
.btn2{  
    color: #21C2BC;  
    background-color: #FFFFFF;  
}  
.btn1:after{  
    border: none;  
}  
.btn2:after{  
    border: none;  
}  
.u1{  
    display: flex;  
    flex-direction: row;  
    justify-content: center;  
    align-items: center;  
    height: 90upx;  
    width: 70%;  
    line-height: 90upx;  
    border-radius: 16upx;  
    margin: 20upx auto 0px;  
}  
.hc2{  
    background-color: #F1F1F1;  
}  

操作步骤:
login.vue  

<view>  
    <view class="lg-main">  
        <view class="u-f-sbc">  
            <view class="lg-title" style="margin-top: 80upx;font-size: 44upx;color: #384A65;">{{title1}}</view>  
            <view class="lg-title" style="margin-top: 80upx;font-size: 30upx;" @click="changeLoginType()">  
                <text style="border: solid 2upx #21C2BC;font-size: 25upx;font-weight:bold;padding: 10upx;border-radius: 5upx;">切换登录方式</text>  
            </view>  
        </view>  
        <view class="">  
            <view class="lg-input2" style="">  
                <input type="text" v-model="account" class="lg-it-c2" placeholder="输入手机号/邮箱地址" placeholder-style="color:#B8C0C9;font-size:32upx;"/>  
            </view>  
            <view class="lg-input2">  
                <input type="text" password="true" v-model="pwd"   
                class="lg-it-c2" placeholder="输入登录密码"   
                placeholder-style="color:#B8C0C9;font-size:32upx;"  
                @confirm="handleLogin()"  
                />  
            </view>  
        </view>  
    </view>  
    <view class="for-lg u-f-c">  
        <view class="forget-pwd u-f u-f-ac" @tap="goForget">  
            <image src="/static/image/user/forget.png"></image>  
            <text>忘记密码</text>  
        </view>  
        <view class="login-bs u-f-c u-f-ajc">  
            <view class="u1"><button class="btn1" :class="{loginok:loginok}" @tap="handleLogin()" :loading="loading" :disabled="disabled">登录</button></view>  
            <view class="u1"><button class="btn2" hover-class="hc2" @tap="goReg">注册</button></view>  
        </view>  
    </view>  
</view>
login.css  

.for-lg{  
    position: fixed;  
    bottom: 80upx;  
}  
.forget-pwd{  
    margin-left: 56upx;  
    margin-bottom: 40upx;  
}  
.forget-pwd>image{  
    width: 36upx;  
    height: 42upx;  
    vertical-align: middle;  
    margin-right: 16upx;  
}  
.forget-pwd>text{  
    color: #21C2BC;  
    font-size: 26upx;  
}  
.login-bs{  
    width: 100%;  
}  
.btn1,.btn2{  
    width: 99vw;  
    margin-bottom: 40upx;  
    font-weight: bold;  
    font-size: 34upx;  
}  
.btn1{  
    color: #FFFFFF;  
    background-color: #ced4da;  
}  
.loginok{  
    background-color: #21C2BC !important;  
    color: #FFFFFF !important;  
}  
.btn2{  
    color: #21C2BC;  
    background-color: #FFFFFF;  
}  
.btn1:after{  
    border: none;  
}  
.btn2:after{  
    border: none;  
}  
.u1{  
    display: flex;  
    flex-direction: row;  
    justify-content: center;  
    align-items: center;  
    height: 90upx;  
    width: 70%;  
    line-height: 90upx;  
    border-radius: 16upx;  
    margin: 20upx auto 0px;  
}  
.hc2{  
    background-color: #F1F1F1;  
}  

预期结果:

软键盘不会弹起

实际结果:

点击输入框,软键盘会弹起,但是第二次再点击输入框,软键盘不会弹起了

bug描述:

login.vue  

<view>  
    <view class="lg-main">  
        <view class="u-f-sbc">  
            <view class="lg-title" style="margin-top: 80upx;font-size: 44upx;color: #384A65;">{{title1}}</view>  
            <view class="lg-title" style="margin-top: 80upx;font-size: 30upx;" @click="changeLoginType()">  
                <text style="border: solid 2upx #21C2BC;font-size: 25upx;font-weight:bold;padding: 10upx;border-radius: 5upx;">切换登录方式</text>  
            </view>  
        </view>  
        <view class="">  
            <view class="lg-input2" style="">  
                <input type="text" v-model="account" class="lg-it-c2" placeholder="输入手机号/邮箱地址" placeholder-style="color:#B8C0C9;font-size:32upx;"/>  
            </view>  
            <view class="lg-input2">  
                <input type="text" password="true" v-model="pwd"   
                class="lg-it-c2" placeholder="输入登录密码"   
                placeholder-style="color:#B8C0C9;font-size:32upx;"  
                @confirm="handleLogin()"  
                />  
            </view>  
        </view>  
    </view>  
    <view class="for-lg u-f-c">  
        <view class="forget-pwd u-f u-f-ac" @tap="goForget">  
            <image src="/static/image/user/forget.png"></image>  
            <text>忘记密码</text>  
        </view>  
        <view class="login-bs u-f-c u-f-ajc">  
            <view class="u1"><button class="btn1" :class="{loginok:loginok}" @tap="handleLogin()" :loading="loading" :disabled="disabled">登录</button></view>  
            <view class="u1"><button class="btn2" hover-class="hc2" @tap="goReg">注册</button></view>  
        </view>  
    </view>  
</view>
login.css  

.for-lg{  
    position: fixed;  
    bottom: 80upx;  
}  
.forget-pwd{  
    margin-left: 56upx;  
    margin-bottom: 40upx;  
}  
.forget-pwd>image{  
    width: 36upx;  
    height: 42upx;  
    vertical-align: middle;  
    margin-right: 16upx;  
}  
.forget-pwd>text{  
    color: #21C2BC;  
    font-size: 26upx;  
}  
.login-bs{  
    width: 100%;  
}  
.btn1,.btn2{  
    width: 99vw;  
    margin-bottom: 40upx;  
    font-weight: bold;  
    font-size: 34upx;  
}  
.btn1{  
    color: #FFFFFF;  
    background-color: #ced4da;  
}  
.loginok{  
    background-color: #21C2BC !important;  
    color: #FFFFFF !important;  
}  
.btn2{  
    color: #21C2BC;  
    background-color: #FFFFFF;  
}  
.btn1:after{  
    border: none;  
}  
.btn2:after{  
    border: none;  
}  
.u1{  
    display: flex;  
    flex-direction: row;  
    justify-content: center;  
    align-items: center;  
    height: 90upx;  
    width: 70%;  
    line-height: 90upx;  
    border-radius: 16upx;  
    margin: 20upx auto 0px;  
}  
.hc2{  
    background-color: #F1F1F1;  
}  
2020-05-17 18:56 负责人:无 分享
已邀请:

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