uni-app 键盘不收起时切换多个输入框页面不滚动，键盘遮住输入框

uni-app 键盘不收起时切换多个输入框页面不滚动，键盘遮住输入框

开发环境 版本号 项目创建方式
Windows window 7 64x HBuilderX
3.1.6

操作步骤：

在页面拥有n多个输入框的情况下，先点击获取第一个输入框焦点，并保持键盘不收起的情况下，点击获取底部输入框的焦点

预期结果：

页面会往上滚动，让拥有焦点的输入框保不被键盘挡住

实际结果：

页面并没有滚动，并且键盘遮住焦点输入框

bug描述：

在键盘不收起的情况下，切换多个输入框页面没有滚动，造成键盘会遮住输入框


更多关于uni-app 键盘不收起时切换多个输入框页面不滚动，键盘遮住输入框的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

用示例代码hello uni-app中的input示例能出现你的问题吗？

更多关于uni-app 键盘不收起时切换多个输入框页面不滚动，键盘遮住输入框的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在uni-app中常见的键盘遮挡问题，通常与页面滚动机制和输入框焦点切换时的自动滚动失效有关。

问题原因： 当键盘保持展开状态时，切换输入框焦点可能不会触发页面的自动滚动调整。这通常是因为：

  1. 页面滚动容器未正确识别
  2. 焦点切换时未触发滚动计算
  3. 键盘高度变化未及时响应

解决方案：

  1. 使用uni.pageScrollTo手动控制滚动
onFocus(e) {
  // 获取输入框位置
  const query = uni.createSelectorQuery().in(this);
  query.select('#targetInput').boundingClientRect(rect => {
    uni.pageScrollTo({
      scrollTop: rect.top,
      duration: 300
    });
  }).exec();
}
  1. 配置页面scroll-view（如使用） 确保滚动容器设置正确高度，并启用纵向滚动：
<scroll-view scroll-y style="height: 100vh">
  <!-- 输入框内容 -->
</scroll-view>
  1. 监听键盘高度变化
onLoad() {
  uni.onKeyboardHeightChange(res => {
    this.keyboardHeight = res.height;
    // 根据键盘高度调整布局
  });
}
  1. 调整输入框位置 对于固定定位的输入框，可在focus时动态调整位置：
onFocus() {
  this.inputBottom = this.keyboardHeight + 'px';
}
回到顶部