【报Bug】输入框聚焦时内容异常移位

分类：uni-app

bug反馈

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

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 3.3.4

第三方开发者工具版本号： 1.05.2111300

基础库版本号： 2.21.2

项目创建方式： HBuilderX

示例代码：

<template>  
    <!-- 正常执行  使用了height: calc(100% - 0.01rpx); -->  
    <!-- <scroll-view :scroll-y="true" style="height: calc(100% - 0.01rpx);">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </scroll-view> -->  

    <!-- 1.非正常 -->  
    <view  style="height:100%;overflow-y: auto;">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </view>  

    <!-- 2.非正常 -->  
    <!-- <scroll-view  :scroll-y="true"  style="height:100%;">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </scroll-view> -->  

    <!-- 问题  为什么给了scroll-view或view 高度100% input聚焦时 输入框内容区域会移位-->  
</template>  

<script>  
    export default {  
        data() {  
            return {}  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
page{  
    width: 100vw;  
    height: 100vh;  
}  
</style>

操作步骤：

<template>  
    <!-- 正常执行  使用了height: calc(100% - 0.01rpx); -->  
    <!-- <scroll-view :scroll-y="true" style="height: calc(100% - 0.01rpx);">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </scroll-view> -->  

    <!-- 1.非正常 -->  
    <view  style="height:100%;overflow-y: auto;">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </view>  

    <!-- 2.非正常 -->  
    <!-- <scroll-view  :scroll-y="true"  style="height:100%;">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </scroll-view> -->  

    <!-- 问题  为什么给了scroll-view或view 高度100% input聚焦时 输入框内容区域会移位-->  
</template>  

<script>  
    export default {  
        data() {  
            return {}  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
page{  
    width: 100vw;  
    height: 100vh;  
}  
</style>

预期结果：

<template>  
    <!-- 正常执行  使用了height: calc(100% - 0.01rpx); -->  
    <!-- <scroll-view :scroll-y="true" style="height: calc(100% - 0.01rpx);">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </scroll-view> -->  

    <!-- 1.非正常 -->  
    <view  style="height:100%;overflow-y: auto;">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </view>  

    <!-- 2.非正常 -->  
    <!-- <scroll-view  :scroll-y="true"  style="height:100%;">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </scroll-view> -->  

    <!-- 问题  为什么给了scroll-view或view 高度100% input聚焦时 输入框内容区域会移位-->  
</template>  

<script>  
    export default {  
        data() {  
            return {}  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
page{  
    width: 100vw;  
    height: 100vh;  
}  
</style>

实际结果：

<template>  
    <!-- 正常执行  使用了height: calc(100% - 0.01rpx); -->  
    <!-- <scroll-view :scroll-y="true" style="height: calc(100% - 0.01rpx);">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </scroll-view> -->  

    <!-- 1.非正常 -->  
    <view  style="height:100%;overflow-y: auto;">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </view>  

    <!-- 2.非正常 -->  
    <!-- <scroll-view  :scroll-y="true"  style="height:100%;">  
        <view v-for="(item,index) in 30" :key="index" style="height: 88rpx;background-color:#F6F6F6 ;border-radius: 12rpx;margin-bottom: 20rpx;">  
            <input   type="text" maxlength="6" placeholder="请输入您的姓名" style="width: 100%;height: 100%;"/>  
        </view>  
    </scroll-view> -->  

    <!-- 问题  为什么给了scroll-view或view 高度100% input聚焦时 输入框内容区域会移位-->  
</template>  

<script>  
    export default {  
        data() {  
            return {}  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
page{  
    width: 100vw;  
    height: 100vh;  
}  
</style>