【报Bug】沉浸式状态栏样式设置"immersed": "none"时，使用用input密码输入框获取焦点未能上推页面

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 3.4.18

手机系统： Android

手机系统版本号： Android 10

手机厂商：小米

手机机型：小米8

页面类型： vue

vue版本： vue2

打包方式：离线

项目创建方式： HBuilderX

示例代码：

<template>  
    <view class="login">  
        <view class="t-t">  
            <p>您好</p>  
            <p>欢迎使用瀑讯</p>  
        </view>  
        <view class="t-login">  
            <view class="t-b">登 录</view>  
            <form class="cl">  
                <view class="t-a">  
                    <input type="text" name="phone" placeholder="请输入账号" />  
                </view>  
                <view class="t-a">  
                    <input placeholder="请输入密码" type="text" password />  
                </view>  
                <view class="t-a">  
                    <input type="text" name="phone" placeholder="请输入账号" />  
                </view>  
                <view class="t-a">  
                    <input placeholder="请输入密码" type="text" password />  
                </view>  
                <view class="t-a">  
                    <input type="text" name="phone" placeholder="请输入账号" />  
                </view>  
                <view class="t-a">  
                    <input placeholder="请输入密码" type="text" password />  
                </view>  
                <view class="t-a">  
                    <input placeholder="请输入密码" type="text" password />  
                </view>  
                <view class="t-a">  
                    <input placeholder="请输入密码" type="text" password />  
                </view>  
                <view class="t-a">  
                    <input type="text" name="phone" placeholder="请输入账号" />  
                </view>  
                <view class="auto-login">  
                    <view class="title">  
                        自动登录  
                    </view>  
                    <switch />  
                </view>  

                <button>登 录</button>  
            </form>  
            <view class="version">  
                <text>版本：(最新)</text>  
            </view>  
        </view>  

    </view>  
</template>  
<style>  
    .avatar-brand {  
        width: 100%;  
        height: 400rpx;  
        background-color: #f00;  
    }  

    .item {  
        display: flex;  
        align-items: center;  
        color: #fff;  
    }  

    .item-left {  
        width: 136rpx;  
        font-size: 14px;  
    }  

    .c_s {  
        margin-top: 40rpx;  
        width: 100%;  
        display: flex;  
        justify-content: center;  
    }  

    .cancel,  
    .save {  
        width: 100rpx;  
        height: 80rpx;  
        line-height: 80rpx;  
        text-align: center;  
        border: 1rpx solid #fff;  
        color: #FFFFFF;  
        margin-right: 40rpx;  
    }  

    .t-login {  
        width: 580rpx;  
        padding: 55rpx;  
        margin: 0 auto;  
        font-size: 28rpx;  
        background-color: #ffffff;  
        border-radius: 20rpx;  
        position: relative;  
        /* margin-top: -100rpx; */  
        box-shadow: 0 7px 7px 0 rgba(0, 0, 0, 0.2);  
        z-index: 9;  
    }  

    .t-login button {  
        font-size: 28rpx;  
        background: linear-gradient(to right, rgb(0, 137, 200), rgb(13, 60, 106));  
        color: #fff;  
        height: 90rpx;  
        line-height: 90rpx;  
        border-radius: 50rpx;  
    }  

    .t-login input {  
        padding: 0 20rpx 0 120rpx;  
        height: 90rpx;  
        line-height: 90rpx;  
        margin-bottom: 50rpx;  
        background: #f6f6f6;  
        border: 1px solid #f6f6f6;  
        font-size: 28rpx;  
        border-radius: 50rpx;  
        color: #000;  
    }  

    .t-login .t-a {  
        position: relative;  
    }  

    .t-login .t-a image {  
        width: 40rpx;  
        height: 40rpx;  
        position: absolute;  
        left: 40rpx;  
        top: 28rpx;  
        padding-right: 20rpx;  
    }  

    .t-login .t-b {  
        text-align: left;  
        font-size: 46rpx;  
        color: #1296db;  
        font-weight: bold;  
        margin: 0 0 50rpx 20rpx;  
    }  

    .t-login .t-d {  
        text-align: center;  
        color: #999;  
        margin: 80rpx 0;  
    }  

    .t-login .t-c {  
        text-align: right;  
        color: #c0c0c0;  
        margin: -20rpx 30rpx 40rpx 0;  
    }  

    .t-login .t-f {  
        text-align: center;  
        margin: 200rpx 0 0 0;  
        color: #666;  
    }  

    .t-login .t-f text {  
        margin-left: 20rpx;  
        color: #aaaaaa;  
        font-size: 27rpx;  
    }  

    .t-login .uni-input-placeholder {  
        color: #aeaeae;  
    }  

    .cl {  
        zoom: 1;  
    }  

    .cl:after {  
        clear: both;  
        display: block;  
        visibility: hidden;  
        height: 0;  
        content: '\20';  
    }  

    .cardBox {  
        -webkit-box-orient: horizontal;  
        -webkit-box-direction: normal;  
        -webkit-flex-direction: row;  
        flex-direction: row;  
        -webkit-box-align: center;  
        -webkit-align-items: center;  
        align-items: center;  
        padding: 5px;  
        background: #ffffff;  
        opacity: 0.9;  
        -webkit-border-radius: 20rpx;  
        border-radius: 0 0 20rpx 20rpx;  
        height: 70rpx;  
        width: 600rpx;  
        margin: 0 auto;  
        position: relative;  
        text-align: center;  
        line-height: 70rpx;  
        color: #aaa;  
        font-size: 28rpx;  
    }  

    .cardBox .txt {  
        color: #fe519f;  
    }  

    .t-t {  
        text-align: left;  
        font-size: 38rpx;  
        color: #1296db;  
        padding: 0rpx 0 0 30rpx;  
        font-weight: bold;  
        margin-bottom: 20rpx;  
    }  

    .uni-icon {  
        position: absolute;  
        top: calc(50% - 12px);  
        right: 20rpx;  
        font-family: uniicons;  
        font-size: 24px;  
        font-weight: normal;  
        font-style: normal;  
        width: 24px;  
        height: 24px;  
        line-height: 24px;  
        color: #999999;  
    }  

    .uni-eye-active {  
        color: #007AFF;  
    }  
</style>

操作步骤：

<template>  
    <view class="login">  
        <view class="t-t">  
            <p>您好</p>  
            <p>欢迎使用瀑讯</p>  
        </view>  
        <view class="t-login">  
            <view class="t-b">登 录</view>  
            <form class="cl">  
                <view class="t-a">  
                    <input type="text" name="phone" placeholder="请输入账号" />  
                </view>  
                <view class="t-a">  
                    <input placeholder="请输入密码" type="text" password />  
                </view>  
                <view class="t-a">  
                    <input type="text" name="phone" placeholder="请输入账号" />  
                </view>  
                <view class="t-a">  
                    <input placeholder="请输入密码" type="text" password />  
                </view>  
                <view class="t-a">  
                    <input type="text" name="phone" placeholder="请输入账号" />  
                </view>  
                <view class="t-a">  
                    <input placeholder="请输入密码" type="text" password />  
                </view>  
                <view class="t-a">  
                    <input placeholder="请输入密码" type="text" password />  
                </view>  
                <view class="t-a">  
                    <input placeholder="请输入密码" type="text" password />  
                </view>  
                <view class="t-a">  
                    <input type="text" name="phone" placeholder="请输入账号" />  
                </view>  
                <view class="auto-login">  
                    <view class="title">  
                        自动登录  
                    </view>  
                    <switch />  
                </view>  

                <button>登 录</button>  
            </form>  
            <view class="version">  
                <text>版本：(最新)</text>  
            </view>  
        </view>  

    </view>  
</template>  
<style>  
    .avatar-brand {  
        width: 100%;  
        height: 400rpx;  
        background-color: #f00;  
    }  

    .item {  
        display: flex;  
        align-items: center;  
        color: #fff;  
    }  

    .item-left {  
        width: 136rpx;  
        font-size: 14px;  
    }  

    .c_s {  
        margin-top: 40rpx;  
        width: 100%;  
        display: flex;  
        justify-content: center;  
    }  

    .cancel,  
    .save {  
        width: 100rpx;  
        height: 80rpx;  
        line-height: 80rpx;  
        text-align: center;  
        border: 1rpx solid #fff;  
        color: #FFFFFF;  
        margin-right: 40rpx;  
    }  

    .t-login {  
        width: 580rpx;  
        padding: 55rpx;  
        margin: 0 auto;  
        font-size: 28rpx;  
        background-color: #ffffff;  
        border-radius: 20rpx;  
        position: relative;  
        /* margin-top: -100rpx; */  
        box-shadow: 0 7px 7px 0 rgba(0, 0, 0, 0.2);  
        z-index: 9;  
    }  

    .t-login button {  
        font-size: 28rpx;  
        background: linear-gradient(to right, rgb(0, 137, 200), rgb(13, 60, 106));  
        color: #fff;  
        height: 90rpx;  
        line-height: 90rpx;  
        border-radius: 50rpx;  
    }  

    .t-login input {  
        padding: 0 20rpx 0 120rpx;  
        height: 90rpx;  
        line-height: 90rpx;  
        margin-bottom: 50rpx;  
        background: #f6f6f6;  
        border: 1px solid #f6f6f6;  
        font-size: 28rpx;  
        border-radius: 50rpx;  
        color: #000;  
    }  

    .t-login .t-a {  
        position: relative;  
    }  

    .t-login .t-a image {  
        width: 40rpx;  
        height: 40rpx;  
        position: absolute;  
        left: 40rpx;  
        top: 28rpx;  
        padding-right: 20rpx;  
    }  

    .t-login .t-b {  
        text-align: left;  
        font-size: 46rpx;  
        color: #1296db;  
        font-weight: bold;  
        margin: 0 0 50rpx 20rpx;  
    }  

    .t-login .t-d {  
        text-align: center;  
        color: #999;  
        margin: 80rpx 0;  
    }  

    .t-login .t-c {  
        text-align: right;  
        color: #c0c0c0;  
        margin: -20rpx 30rpx 40rpx 0;  
    }  

    .t-login .t-f {  
        text-align: center;  
        margin: 200rpx 0 0 0;  
        color: #666;  
    }  

    .t-login .t-f text {  
        margin-left: 20rpx;  
        color: #aaaaaa;  
        font-size: 27rpx;  
    }  

    .t-login .uni-input-placeholder {  
        color: #aeaeae;  
    }  

    .cl {  
        zoom: 1;  
    }  

    .cl:after {  
        clear: both;  
        display: block;  
        visibility: hidden;  
        height: 0;  
        content: '\20';  
    }  

    .cardBox {  
        -webkit-box-orient: horizontal;  
        -webkit-box-direction: normal;  
        -webkit-flex-direction: row;  
        flex-direction: row;  
        -webkit-box-align: center;  
        -webkit-align-items: center;  
        align-items: center;  
        padding: 5px;  
        background: #ffffff;  
        opacity: 0.9;  
        -webkit-border-radius: 20rpx;  
        border-radius: 0 0 20rpx 20rpx;  
        height: 70rpx;  
        width: 600rpx;  
        margin: 0 auto;  
        position: relative;  
        text-align: center;  
        line-height: 70rpx;  
        color: #aaa;  
        font-size: 28rpx;  
    }  

    .cardBox .txt {  
        color: #fe519f;  
    }  

    .t-t {  
        text-align: left;  
        font-size: 38rpx;  
        color: #1296db;  
        padding: 0rpx 0 0 30rpx;  
        font-weight: bold;  
        margin-bottom: 20rpx;  
    }  

    .uni-icon {  
        position: absolute;  
        top: calc(50% - 12px);  
        right: 20rpx;  
        font-family: uniicons;  
        font-size: 24px;  
        font-weight: normal;  
        font-style: normal;  
        width: 24px;  
        height: 24px;  
        line-height: 24px;  
        color: #999999;  
    }  

    .uni-eye-active {  
        color: #007AFF;  
    }  
</style>

预期结果：

点击密码输入框，上推页面

实际结果：

点击密码输入框，没有上推页面（输入的时候才会上推页面，删除记录也不会上推页面）

bug描述：

沉浸式状态栏样式设置"immersed": "none"时，用<input placeholder="请输入密码" type="text" password />的密码输入框获取焦点未能顶起页面，只有在输入密码的时候才会顶起页面（需要输入内容才上推），而<input type="text" name="phone" placeholder="请输入账号" />的文本输入框可在获取焦点时自动上推页面（不用输入内容才上推）

bugDemo01.zip

复现录屏.zip

2022-08-17 15:36 负责人:DCloud_Android_ST 分享

2 个回复

爱tutu爱生活 (作者) - 前端渣渣

麻烦官方有空看下这个问题

DCloud_UNI_WZF

测试聚焦时不会顶起页面，但是增减input内容时会顶起，你的问题是希望聚集就顶起吗

2023-03-03 17:42
爱tutu爱生活 (作者)

回复 DCloud_UNI_WZF: 是的，因为你普通文本输入框都会顶起页面了，密码框不统一的话看上起很怪异

2023-03-06 08:05
DCloud_UNI_WZF

回复爱tutu爱生活: 刚刚我又试了下（bugDemo01 测试工程，HBuilderX 3.7.6），聚焦就可以顶起页面，您那边稳定复现吗

2023-03-06 11:38
爱tutu爱生活 (作者)

回复 DCloud_UNI_WZF: 我这边小米8机型，即使更新到3.7.6-alpha测试还是稳定复现那个问题（10次有个9次出现吧，偶然有一次是能顶起页面）。另外的一台测试机荣耀20（鸿蒙2.0系统）初次聚焦也是无法顶起页面，后面每次聚焦都可以顶起

2023-03-06 16:02

hws007 - 我就是我！

在pages.json里设置一下
softinputMode："adjustResize"

爱tutu爱生活 (作者)

试了貌似不太行，普通的文本输入框没这个问题，只是密码框点击输入的时候就是不会往上挤（ps：这边用的是去除沉浸式状态栏）

2022-11-01 16:53

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

【报Bug】沉浸式状态栏样式设置"immersed": "none"时，使用用input密码输入框获取焦点未能上推页面

预期结果：

点击密码输入框，上推页面

实际结果：

点击密码输入框，没有上推页面（输入的时候才会上推页面，删除记录也不会上推页面）

bug描述：

2 个回复

公告

相关问题

【报Bug】沉浸式状态栏样式设置"immersed": "none"时，使用用input密码输入框获取焦点未能上推页面

预期结果： 点击密码输入框，上推页面

实际结果： 点击密码输入框，没有上推页面（输入的时候才会上推页面，删除记录也不会上推页面）

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

预期结果：

点击密码输入框，上推页面

实际结果：

点击密码输入框，没有上推页面（输入的时候才会上推页面，删除记录也不会上推页面）