uni-app 输入框聚焦时内容异常移位

uni-app 输入框聚焦时内容异常移位

开发环境 版本号 项目创建方式
Windows Windows10 HBuilderX

bug描述：

输入框在可滚动的区域内，滚动区域往上滚动后，输入框此时聚焦的话，输入内容会异常往上偏移

示例代码：

<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>

更多关于uni-app 输入框聚焦时内容异常移位的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

ios系统正常 安卓会出现此问题 （真机预览 使用的 华为mate20 , 华为畅享20pro ）

更多关于uni-app 输入框聚焦时内容异常移位的实战教程也可以访问 https://www.itying.com/category-93-b0.html


初步分析是微信小程序的原生input组件实现问题，需反馈到微信小程序社区。

今天刚好也遇到这个问题了。 机型华为mate20（鸿蒙系统），IOS正常。 把scroll-view的高度设置成“height: calc(100% - 0.01rpx);” 好了。 谢谢

这个问题是 uni-app 中常见的输入框聚焦滚动异常问题。根本原因是当滚动容器高度设为 100% 时，在部分平台（特别是 iOS Webview 环境）下，输入框聚焦会触发系统自动滚动，导致内容位置计算错误。

你提供的示例中，使用 height: calc(100% - 0.01rpx) 之所以能正常工作，是因为这个微小的差值打破了 100% 的精确匹配，避免了系统默认的滚动调整行为。

解决方案有以下几种：

  1. 使用 scroll-view 并避免 height: 100% 给 scroll-view 设置固定高度或使用 calc() 计算一个非精确的 100% 高度：

    <scroll-view scroll-y style="height: calc(100vh - 0.01px)">
  <!-- 内容 -->
</scroll-view>

  2. 在页面样式添加 overflow 限制 在 page 或外层容器上设置：

    page {
  overflow: hidden;
}

  3. 使用 [@focus](/user/focus) 事件手动控制滚动 当输入框聚焦时，手动调整滚动位置：

    <input [@focus](/user/focus)="handleFocus" />

    methods: {
  handleFocus(e) {
    // 获取当前滚动位置并保持
    // 或使用 uni.pageScrollTo 调整位置
  }
}
回到顶部