Ionic iOS端键盘遮挡输入表单 未自动上滑问题咨询

问题根因 #

iOS端WKWebView默认的键盘弹出逻辑不会自动调整Webview视口高度，也不会主动滚动到聚焦的输入元素位置，和Android端默认行为存在差异，因此该问题仅会在iOS设备上复现。

分步修复方案 #

• 第一步：配置原生键盘插件参数
  首先确保你已经安装了@capacitor/keyboard（Capacitor项目）或cordova-plugin-ionic-keyboard（Cordova项目），在项目配置文件中添加如下配置：

  Capacitor项目（capacitor.config.ts）配置示例：

  import { KeyboardResize, CapacitorConfig } from '@capacitor/keyboard';
  
  const config: CapacitorConfig = {
    plugins: {
      Keyboard: {
        resize: KeyboardResize.Ionic,
        resizeOnFullScreen: true
      }
    }
  };
  

  Cordova项目（config.xml）配置示例：

  <preference name="KeyboardResize" value="ionic" />
  <preference name="KeyboardResizeOnFullScreen" value="true" />
  

• 第二步：添加输入框聚焦自动滚动逻辑
  全局监听输入框focus事件，触发时调用Ionic内置的滚动方法将输入框滚动到可视区域，以下为Angular框架示例，React/Vue项目同理调用对应IonContent组件的scrollToPoint方法即可：

  import { IonContent } from '@ionic/angular';
  
  // 输入框聚焦回调
  const onInputFocus = async (ev: Event) => {
    const inputElement = ev.target as HTMLElement;
    // 延时100ms等待键盘启动完成
    setTimeout(async () => {
      const inputTopOffset = inputElement.getBoundingClientRect().top;
      // 第二个参数可根据业务需求调整顶部预留间距
      await this.ionContent.scrollToPoint(0, inputTopOffset - 100, 300);
    }, 100);
  };
  

• 第三步：排查样式冲突
  如果以上配置不生效，检查全局样式是否存在以下冲突配置，如有需移除或调整：
  • 给body或ion-app设置了height: 100vh固定高度，会阻断resize逻辑生效
  • 输入框父容器设置了overflow: hidden属性禁止滚动
  • 全局关闭了Ionic自带的滚动功能

验证注意事项 #

请打包后在iOS 14+的真机设备上测试，不要仅依赖模拟器验证，模拟器的键盘弹出逻辑和真机存在差异。

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