Ionic ion-input在iPad网页端被键盘遮挡问题及适配咨询

• 原生HTML input是系统级控件，iPadOS的Safari/Chrome对这类控件有内置的键盘适配逻辑：键盘弹出时会自动计算控件位置，调整视口滚动让控件保持在键盘上方。
• Ionic的ion-input是封装的Web Component，默认情况下没有完全复用原生控件的这套视口调整机制。尤其是首次点击时，Ionic的焦点处理流程比浏览器键盘弹出事件慢半拍，导致视口没来得及滚动；而光标已经在控件内时，后续的焦点变化触发了Ionic内部的滚动适配逻辑，所以表现正常。

1. 开启Ionic内置的滚动辅助配置 #

在应用全局配置（比如app.module.ts）里启用Ionic的滚动和自动聚焦辅助，这是最直接的方案：

import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [
    IonicModule.forRoot({
      scrollAssist: true, // 自动滚动到聚焦的控件
      autoFocusAssist: true // 自动处理聚焦时的视口调整
    })
  ]
})
export class AppModule {}

2. 手动监听键盘事件调整滚动 #

如果内置配置不生效，可以手动监听键盘弹出事件，计算控件位置并主动滚动：
在页面组件中添加代码：

import { ElementRef, ViewChild } from '@angular/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-bottom-input-page',
  templateUrl: './bottom-input-page.page.html',
})
export class BottomInputPagePage {
  @ViewChild('targetInput') targetInput!: ElementRef;

  constructor(private platform: Platform) {
    this.platform.ready().then(() => {
      window.addEventListener('keyboardWillShow', (e: any) => {
        const nativeInput = this.targetInput.nativeElement.querySelector('input');
        // 只处理当前聚焦的控件
        if (nativeInput === document.activeElement) {
          const inputRect = nativeInput.getBoundingClientRect();
          const keyboardHeight = e.detail.keyboardHeight;
          // 计算需要滚动的距离，确保控件底部在键盘上方
          const scrollNeeded = inputRect.bottom - (window.innerHeight - keyboardHeight);
          if (scrollNeeded > 0) {
            window.scrollBy(0, scrollNeeded + 10); // 加10px避免贴紧键盘
          }
        }
      });
    });
  }
}

对应的模板给ion-input加模板引用：

<ion-input #targetInput placeholder="Ionic底部输入框"></ion-input>

3. 确保使用ion-content作为滚动容器 #

Ionic的ion-content是专门处理滚动和视口适配的容器，不要用原生div或其他容器替代：

<ion-content [scrollEvents]="true">
  <!-- 页面其他内容 -->
  <div style="margin-top: auto;">
    <ion-input placeholder="Ionic输入框"></ion-input>
    <input placeholder="原生输入框">
  </div>
</ion-content>

margin-top: auto可以把输入框固定在页面底部，配合ion-content的滚动逻辑效果更好。

4. iPadOS专属CSS适配 #

iPadOS的浏览器视口高度计算有特殊性，可通过CSS动态预留键盘空间：

@media (min-width: 768px) {
  .ion-page {
    padding-bottom: env(keyboard-inset-bottom, 0);
  }
}

利用iOS的env()变量获取键盘高度，自动调整页面底部内边距。

内容的提问来源于stack exchange，提问作者jbrabant