【报Bug】button的层级始终在input层级的下面

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： mac pro m1 ventura 13.2

HBuilderX类型：正式

HBuilderX版本号： 3.7.6

第三方开发者工具版本号： 1.06.2301160 darwin-arm64

基础库版本号： 2.30.2

项目创建方式： HBuilderX

示例代码：

<template>  
    <view class="__form">  
        <uni-forms ref="baseForm" :modelValue="formData">  
            <uni-forms-item label="姓名" required>  
                <uni-easyinput v-model="formData.realName" placeholder="请输入姓名" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
            <uni-forms-item label="昵称111" required>  
                <uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />  
            </uni-forms-item>  
        </uni-forms>  
    </view>  
    <view class="__submit_btn">  
        <button class="__submit">提交工单</button>  
    </view>  
</template>  

<script setup lang="ts">  
    import { reactive } from 'vue';  
    const formData = reactive({  
        realName: "",  
        nickName: "",  
        avatar: "",  
    });  
</script>  

<style lang="scss">  
    .__form {  
        padding: 0 10px;  
        padding-bottom: var(--window-bottom);  
        padding-bottom: constant(safe-area-inset-bottom);  
        padding-bottom: env(safe-area-inset-bottom);  
        z-index: 1;  
        position: relative;  
    }  

    .__submit_btn {  
        background: #fff;  
        position: sticky;  
        width: 100%;  
        bottom: 0;  
        padding-bottom: var(--window-bottom);  
        padding-bottom: constant(safe-area-inset-bottom);  
        padding-bottom: env(safe-area-inset-bottom);  
        z-index: 10;  

        .__submit {  
            color: rgba(255, 255, 255, 1);  
            background-color: #2D8CF0;  
            border: 1px solid #2D8CF0;  
            border-radius: 50px;  
            flex: 1;  
            z-index: 11;  
        }  
    }  
</style>

操作步骤：

需要在真机（带有安全区的iPhone）上调试，将一个input框大致滑动到button的下方，然后点击button。

预期结果：

点击button不触发背后的input

实际结果：

感觉上是层级关系不对，始终无法控制input的层级

bug描述：

button的层级始终在input层级的下面，导致在有安全区的iPhone手机上，如何button下面正好有input时，点击button，会触发input的输入框focus并弹出键盘。
我猜测是input的placeholder层级太高了。

2023-03-03 23:14 负责人:无分享

1 个回复

DCloud_UNI_WZF

测试微信小程序原生开发是否存在该问题

要回复问题请先登录或注册

【报Bug】button的层级始终在input层级的下面

操作步骤：

需要在真机（带有安全区的iPhone）上调试，将一个input框大致滑动到button的下方，然后点击button。

预期结果：

点击button不触发背后的input

实际结果：

感觉上是层级关系不对，始终无法控制input的层级

bug描述：

1 个回复

公告

相关问题

【报Bug】button的层级始终在input层级的下面

操作步骤： 需要在真机（带有安全区的iPhone）上调试，将一个input框大致滑动到button的下方，然后点击button。

预期结果： 点击button不触发背后的input

实际结果： 感觉上是层级关系不对，始终无法控制input的层级

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

需要在真机（带有安全区的iPhone）上调试，将一个input框大致滑动到button的下方，然后点击button。

预期结果：

点击button不触发背后的input

实际结果：

感觉上是层级关系不对，始终无法控制input的层级