Ionic Angular应用OTP自动填充时跳转回上一页问题如何解决

这个自动填充验证码后跳回上一页的问题，本质是移动端系统级的短信验证码填充机制触发了Ionic路由的意外回退，你设置的autocomplete="off"对系统级OTP填充无效——目前iOS 12+、Android 8+以上的系统为了保证验证码填充体验，会故意忽略autocomplete="off"配置，反而会因为系统无法识别输入框类型，触发多余的DOM重绘，带动路由栈异常触发回退逻辑。

• 1 修复路由跳转逻辑，彻底清除前页历史栈 #

你之前使用的navigator['app'].clearHistory()兼容性极差，不同设备的WebView实现差异很大，替换为Ionic官方的根路由替换方法，跳转后直接清除手机号输入页的历史记录，就算触发回退也不会回到上一页：

sign_up() {
   if (this.mob_number.toString().length == 10) {
   let navigationExtras: NavigationExtras = {
    state: {
      phone: this.mob_number,
    },
  };
  // 替换原有的navigate方法为navigateRoot，直接替换路由栈根节点
   this.route.navigateRoot(["./verification"], navigationExtras);
   } else {
   alert("Enter Valid 10 digit Mobile Number");
   }
 }

• 2 优化OTP输入框配置，适配系统填充规则 #

不要用autocomplete="off"，改为W3C标准的一次性验证码属性，让系统识别输入框类型，避免填充时触发多余的页面变更：

<ion-input 
  type="text" 
  inputmode="numeric" 
  maxlength="6"
  autocomplete="one-time-code"
  [(ngModel)]="otpCode"
></ion-input>

• 3 验证码页面拦截意外回退 #

在verification页面的生命周期内，临时禁用硬件返回和iOS侧滑返回，避免填充时的页面抖动触发回退，页面离开时再恢复配置，不影响其他页面功能：

import { Platform, NavController } from '@ionic/angular';

constructor(private platform: Platform, private navCtrl: NavController) {}

ionViewWillEnter() {
  // 拦截硬件返回键，优先级设为最高，仅允许用户主动点击页面返回按钮时才执行回退
  this.platform.backButton.subscribeWithPriority(100, () => {});
  // 禁用iOS侧滑返回手势
  if (this.platform.is('ios')) {
    this.navCtrl.swipeBackEnabled = false;
  }
}

ionViewWillLeave() {
  // 页面离开时恢复返回键和侧滑手势配置
  this.platform.backButton.observers.pop();
  if (this.platform.is('ios')) {
    this.navCtrl.swipeBackEnabled = true;
  }
}

• 4 可选兜底方案 #

如果仍有少量特殊机型出现问题，可在OTP输入框的ionChange事件中加2秒防抖，填充完成后的2秒内禁止所有路由跳转操作，避免异常触发。

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