uni-app 重新打开 app后 首次textarea获得焦点时 键盘会遮挡 textarea

uni-app 重新打开 app后 首次textarea获得焦点时 键盘会遮挡 textarea

开发环境 版本号 项目创建方式
Mac macOS 12 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

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

HBuilderX类型：正式

HBuilderX版本号：3.2.13

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：ip Xr、ip 13 pro、一加5t

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<textarea id="textarea-info"  
class="pad10"  
confirm-type="send"  
cursor-spacing="50"  
style="'height:'+ textarea_h +'px;'"  
value="content"
hold-keyboard="true"
maxlength="-1"
    @focus="openInput"
    @input="setContent"
    @confirm="sendMsg"/>

操作步骤：

  1. 重启app
  2. 首次让textarea 获取焦点
  3. 键盘弹出遮挡部分 textarea 输入框
  4. 失去焦点再点击输入框 恢复正常
  5. 重启后回再次出现以上步骤

预期结果：

重启app 后 ，首次 textarea聚焦打开 键盘时 ，键盘不遮挡textarea 输入框

实际结果：

重启app 后 ，首次 textarea聚焦打开 键盘时 ，键盘 把textarea输入框遮挡 一部分

失去焦点再 聚焦后 键盘才正常 不遮挡 textarea输入框

bug描述：

重新打开 app ，首次textarea 获得焦点时，键盘会遮挡 textarea， 详见附件

<textarea id="textarea-info"  
        class="pad10"  
        confirm-type="send"  
        cursor-spacing="50"  
        :style="'height:'+ textarea_h +'px;'"  
        :value="content"   
        :hold-keyboard="true"   
        :maxlength="-1"   
        @focus="openInput"   
        @input="setContent"   
        @confirm="sendMsg"/>

更多关于uni-app 重新打开 app后 首次textarea获得焦点时 键盘会遮挡 textarea的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 重新打开 app后 首次textarea获得焦点时 键盘会遮挡 textarea的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的iOS平台上的键盘遮挡问题，通常在应用重启后首次聚焦输入框时出现。主要原因是键盘弹出时页面布局调整的时机问题。

解决方案：

  1. 使用 cursor-spacing 属性
    你已经在代码中设置了 cursor-spacing="50"，这应该能提供一定的间距。可以尝试增大这个值，比如 cursor-spacing="100"，确保有足够的空间。

  2. 添加 adjust-position 属性
    在 textarea 上添加 adjust-position="true"，让页面自动调整位置避免遮挡：

    <textarea 
    adjust-position="true"
    ...其他属性
/>

  3. 手动调整滚动位置
    在 @focus 事件中，使用 uni.pageScrollTo 手动滚动到输入框位置：

    openInput() {
    setTimeout(() => {
        uni.createSelectorQuery()
            .select('#textarea-info')
            .boundingClientRect(rect => {
                uni.pageScrollTo({
                    scrollTop: rect.top,
                    duration: 300
                })
            })
            .exec()
    }, 100) // 延迟确保键盘已弹出
}

  4. 使用 focus 方法的回调
    如果通过代码触发聚焦，可以使用回调：

    this.$nextTick(() => {
    uni.createSelectorQuery()
        .select('#textarea-info')
        .focus()
        .exec()
})
回到顶部