输入框和手机键盘顶起问题

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

在 uni-app 开发中，点击输入框时软键盘顶起间距异常过高（偶尔顶起两倍高度或超大间距，偶尔又恢复正常），通常由以下几种原因引起：

1. 双重推顶逻辑冲突（最常见原因）

   • 现象原因：系统默认会开启输入框的页面自动上推机制（:adjust-position="true"）。如果代码中同时监听了键盘高度（例如通过 uni.onKeyboardHeightChange 或 @keyboardheightchange）并在样式上手动增加了底部距离（如修改 bottom、padding-bottom 或 transform），就会导致“原生上推一次 + 手动位移一次”，使输入框被推得过高。
   • 为什么偶尔正常：快速点击、失焦重聚或键盘动画未完全结束时，键盘高度事件触发时序和原生上推时机不同步，容易出现偶尔正常、偶尔叠加的情况。

2. 软键盘弹出模式（softinputMode）与滚动计算偏差

   • 现象原因：App 端默认的软键盘模式是 adjustPan（整个 webview 窗体向上平移以保证输入框不被遮挡）。当页面本身处于滚动状态、嵌套在 scroll-view 内或页面结构较为复杂时，系统计算上推基准距离可能出现偏差。
   • 更多说明可参考官方文档：关于软键盘弹出的逻辑说明 以及相关社区问题讨论：【报Bug】input输入框在弹出键盘之后偶尔会将页面抬高到两倍键盘的高度。

3. 连续聚焦或光标间距（cursor-spacing）未规范

   • 从一个输入框切换聚焦到另一个输入框时，键盘未完全收起就直接重新计算高度，可能导致位移累计。
   • 未指定 cursor-spacing 或数值设置过大。

解决方案与最佳实践

方式一：完全交由手动控制（推荐用于底部悬浮输入框、聊天页面等场景）
禁用原生页面推顶，完全通过键盘高度动态调整输入框位置：

1. 给 input 或 textarea 设置 :adjust-position="false"。
2. 监听键盘高度变化，动态改变底部容器的 bottom 或 padding-bottom：

<template>  
  <view class="footer" :style="{ bottom: keyboardHeight + 'px' }">  
    <input   
      :adjust-position="false"   
      placeholder="请输入内容"   
      @keyboardheightchange="onKeyboardHeightChange"  
    />  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      keyboardHeight: 0  
    }  
  },  
  methods: {  
    onKeyboardHeightChange(e) {  
      this.keyboardHeight = e.detail.height || 0  
    }  
  }  
}  
</script>

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

方式二：使用原生推顶，移除自定义位移代码（推荐用于普通表单页面）

1. 保持 :adjust-position="true"（默认即为 true）。
2. 检查并移除所有根据键盘高度手动修改 bottom、margin-bottom、scrollTop 的逻辑。
3. 显式设置光标与键盘的间距，例如设置 cursor-spacing="15"（单位为 px）。

方式三：调整页面软键盘弹出模式（针对 App 端）
如果使用的是 App 端，可以在 pages.json 中将对应页面的 softinputMode 改为 adjustResize（软键盘弹出时挤压 webview 窗体高度，而不是平移窗体）：

{  
  "path": "pages/index/index",  
  "style": {  
    "app-plus": {  
      "softinputMode": "adjustResize"  
    }  
  }  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent