如何阻止Ionic v6+Angular14中点击加减按钮唤起键盘

基于Ionic v6（搭配Capacitor）和Angular 14开发的应用中，有一个带+/-按钮的数字输入框组件。点击输入框时，键盘正常唤起且页面自动滚动到输入框位置，符合预期；但点击+/-按钮时，键盘也会被唤起，却不会触发页面滚动到输入框的操作。需要解决两个方向的需求：要么阻止点击按钮时唤起键盘，要么实现点击按钮时页面滚动到对应输入框。

现有代码 #

HTML代码 #

<ion-item lines="none" slot="end" [disabled]="product.stock === null">
  <ion-icon color="vigros" name="remove-circle" (click)="decrementQty(product)"></ion-icon>
  <ion-input type="number" value="0" min="0" step="1" [(ngModel)]="product.qty"></ion-input>
  <ion-icon color="vigros" name="add-circle" (click)="incrementQty(product)"></ion-icon>
</ion-item>

TypeScript代码 #

incrementQty(produkt: Product['product']) {
  const increasedQty = this.product.qty += 1.00;

  this.cartService.addUpdateProductToCart(increasedQty, produkt).subscribe(
    (data: any) => {
      console.log(data);
      this.product.qty = this.product.qty;
      this.getCart();
      Keyboard.hide();
    },
    error => {
      console.log('Error', error);
    }
  );
}

decrementQty(produkt: Product['product']) {
  if(this.product.qty > 0) {
    const decreasedQty = this.product.qty -1;

    this.cartService.addUpdateProductToCart(decreasedQty, produkt).subscribe(
      (data: any) => {
        console.log(data);
        this.product.qty -= 1;
        this.getCart();
        Keyboard.hide();
      },
      error => {
        console.log('Error', error);
      }
    );
  }
}

解决方案 #

方法一：阻止点击按钮时唤起键盘 #

问题核心是点击图标按钮时，事件冒泡导致输入框自动获得焦点，进而唤起键盘。可以通过以下两种方式解决：

1. 阻止事件冒泡
   直接在HTML的按钮点击事件中添加$event.stopPropagation()，阻止事件传递到父级元素：

<ion-icon color="vigros" name="remove-circle" (click)="decrementQty(product); $event.stopPropagation()"></ion-icon>
<ion-icon color="vigros" name="add-circle" (click)="incrementQty(product); $event.stopPropagation()"></ion-icon>

2. 主动移除输入框焦点
   先给ion-input添加模板引用，再在按钮点击逻辑中让输入框失去焦点：

• 修改HTML：

<ion-input #qtyInput type="number" value="0" min="0" step="1" [(ngModel)]="product.qty"></ion-input>

• 修改TS代码：

import { ViewChild } from '@angular/core';
import { IonInput } from '@ionic/angular';

@ViewChild('qtyInput') qtyInput!: IonInput;

incrementQty(produkt: Product['product']) {
  // 先让输入框失去焦点
  this.qtyInput.getInputElement().then(el => el.blur());

  const increasedQty = this.product.qty += 1.00;
  this.cartService.addUpdateProductToCart(increasedQty, produkt).subscribe(
    (data: any) => {
      console.log(data);
      this.product.qty = this.product.qty;
      this.getCart();
    },
    error => {
      console.log('Error', error);
    }
  );
}

decrementQty(produkt: Product['product']) {
  if(this.product.qty > 0) {
    // 先让输入框失去焦点
    this.qtyInput.getInputElement().then(el => el.blur());

    const decreasedQty = this.product.qty -1;
    this.cartService.addUpdateProductToCart(decreasedQty, produkt).subscribe(
      (data: any) => {
        console.log(data);
        this.product.qty -= 1;
        this.getCart();
      },
      error => {
        console.log('Error', error);
      }
    );
  }
}

方法二：点击按钮时滚动到输入框 #

如果需要保留键盘唤起的逻辑，同时让页面滚动到输入框位置，可以添加滚动操作：

• 同样先给ion-input添加模板引用#qtyInput，然后在TS的点击方法中加入滚动代码：

import { ViewChild } from '@angular/core';
import { IonInput } from '@ionic/angular';

@ViewChild('qtyInput') qtyInput!: IonInput;

incrementQty(produkt: Product['product']) {
  // 滚动到输入框位置
  this.qtyInput.getInputElement().then(el => {
    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
  });

  const increasedQty = this.product.qty += 1.00;
  this.cartService.addUpdateProductToCart(increasedQty, produkt).subscribe(
    (data: any) => {
      console.log(data);
      this.product.qty = this.product.qty;
      this.getCart();
    },
    error => {
      console.log('Error', error);
    }
  );
}

decrementQty(produkt: Product['product']) {
  if(this.product.qty > 0) {
    // 滚动到输入框位置
    this.qtyInput.getInputElement().then(el => {
      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
    });

    const decreasedQty = this.product.qty -1;
    this.cartService.addUpdateProductToCart(decreasedQty, produkt).subscribe(
      (data: any) => {
        console.log(data);
        this.product.qty -= 1;
        this.getCart();
      },
      error => {
        console.log('Error', error);
      }
    );
  }
}

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