Angular Ionic iOS应用输入框光标始终置顶问题求助

针对你遇到的iOS端输入框光标始终显示在最上层（DOM层级设置无效）的问题，这是因为iOS系统的光标属于原生控件，不受WebView的z-index控制，以下是无需大规模修改代码的排查和解决方法：

• 升级依赖版本
  部分旧版本的Ionic/Capacitor存在iOS WebView光标层级的已知bug，先检查当前版本：

  ionic info
  

  升级到最新稳定版：

  npm install @ionic/angular@latest @capacitor/core@latest @capacitor/ios@latest
  npx cap sync ios
  

• 全局监听滚动自动失焦（最小改动方案）
  无需给每个输入框添加指令，在app.component.ts中全局监听页面滚动事件，自动失焦当前激活的输入框：

  import { Component, HostListener } from '@angular/core';
  import { Keyboard } from '@capacitor/keyboard';
  
  @Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss'],
  })
  export class AppComponent {
    @HostListener('window:scroll', ['$event'])
    onGlobalScroll() {
      const activeInput = document.activeElement as HTMLElement;
      if (activeInput?.tagName.match(/INPUT|TEXTAREA|ION-INPUT|ION-TEXTAREA/)) {
        activeInput.blur();
        Keyboard.hide();
      }
    }
  }
  

• 调整iOS WebView原生层级
  在iOS项目的AppDelegate.swift中修改WebView的层级配置，确保WebView的层级高于系统光标容器：

  import UIKit
  import Capacitor
  
  @UIApplicationMain
  class AppDelegate: UIResponder, UIApplicationDelegate {
  
    var window: UIWindow?
  
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
      // 初始化Capacitor
      let bridge = CAPBridgeViewController.init()
      self.window = UIWindow(frame: UIScreen.main.bounds)
      self.window?.rootViewController = bridge
      self.window?.makeKeyAndVisible()
  
      // 修改WebView层级
      bridge.webView.layer.zPosition = 1000
      bridge.webView.scrollView.layer.zPosition = 1000
  
      return true
    }
  
    // 其他默认代码...
  }
  

• 检查自定义弹窗/模态框的交互逻辑
  如果页面中存在自定义模态框或弹窗，在弹窗显示时主动失焦输入框：

  // 示例：打开模态框时失焦
  async openModal() {
    const activeInput = document.activeElement as HTMLElement;
    activeInput?.blur();
    const modal = await this.modalController.create({
      component: YourModalComponent
    });
    return await modal.present();
  }
  

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