Android 和 iOS 上的“返回”按钮减少 input type="number" 的值

问题描述

我正在 Angular 上编写简单的组件。基本上这是用两个单独的按钮输入（一个用于增加另一个用于减少输入数字）。 一切正常，但我的 QA 说在移动设备上：据说必须关闭键盘的 Andriod 和 iOS“提交”按钮将输入值减少 1。 我在网上冲浪了两天，但至少找不到任何提示。 这是我的 HTML：

  <button class="btn-counter minus" (click)="reduceItemCount()">
    <span class="icon icon-minus"></span>
  </button>
  <label class="quantity-counter-wrapper">
    <input class="input-quantity-counter"[formControl]="inputControl" type="number"
      onkeydown="return event.keyCode !== 190 && event.keyCode !== 110" pattern="[0-9]*" inputmode="numeric">
  </label>
  <button class="btn-counter plus" (click)="increaseItemCount()">
    <span class="icon icon-plus"></span>
  </button>
</div>

这是cy组件：

import {
  Component,EventEmitter,HostListener,Input,OnInit,Output,} from '@angular/core';

import { FormControl,FormGroup } from '@angular/forms';

/**
 * Quantity selector component
 */
@Component({
  selector: 'amer-quantity-selector',templateUrl: './quantity-selector.component.html',styleUrls: ['./quantity-selector.component.scss'],})

export class QuantitySelectorComponent implements OnInit {
  /**
   * Form from parent element
   */
  @input()
  parentForm: FormGroup;

  /**
   * Control name to recognize which FormControl to get from parentForm
   */
  @input()
  controlName: string;

  /**
   * Number by which we should increase or reduce number in input
   */
  @input()
  inputStep = 1;

  /**
   * Minimum value allowed
   */
  @input()
  minValue = 0;

  /**
   * Maximum value allowed
   */
  @input()
  maxValue = 999;

  inputControl: FormControl;

  ngOnInit(): void {
    this.inputControl = this.parentForm.get(this.controlName) as FormControl;

    this.inputControl.valueChanges.subscribe((val: any) => {
      /**
       * Clear non digital symbols
       */
      this.inputControl.setValue(parseInt(this.inputControl.value,10),{ emitEvent: false });

      /**
      * Set value to minimum allowed if user enters lower number
      */
      if (val < this.minValue || Number.isNaN(val) || val === null) {
        this.inputControl.setValue(this.minValue);
      }

      /**
      * Set value to maximum allowed if user enters higher number
      */
      if (val > this.maxValue) {
        this.inputControl.setValue(this.maxValue);
      }
    });
  }

  /**
 * Increase quantity counter by "inputStep"
 */
  increaseItemCount(): void {
    this.inputControl.setValue(parseInt(this.inputControl.value,10) + this.inputStep);
  }

  /**
 * Descrease quantity counter by "inputStep"
 */
  reduceItemCount(): void {
    this.inputControl.setValue(parseInt(this.inputControl.value,10) - this.inputStep);
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）