如何将“0”的每个用户输入替换为“1”答案

【问题标题】：How can I replace every user input of '0' to '1'如何将“0”的每个用户输入替换为“1”
【发布时间】：2020-04-06 15:49:52
【问题描述】：

这是我的 OnlyNumber 指令，它只能在数字上正常工作。我希望每当用户在输入字段中输入 0 时，它都会转换为 1

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[OnlyNumber]'
})
export class OnlyNumber {

  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    console.log(e);
    if (this.OnlyNumber) {
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode == 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode == 88 && e.ctrlKey === true) ||
        // Allow: Numpad Number
        (e.keyCode >= 96 && e.keyCode <= 105) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
      }
      // Ensure that it is a number and stop the keypress
      if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
          e.preventDefault();
      }
    }
  }
}

这是我的 html 输入字段：

<input OnlyNumber='true'  MaxNumber="9" type="text" [(ngModel)]='cart.selectedQty'
                                (ngModelChange)='calculateTotalPrice($event,cart,i)' class="mb-0" />

请给我任何解决方案。

【问题讨论】：

它看起来就像你试图得到一个大于 0 的数字，至少从那个 HTML sn-p。真的吗？如果是，为什么不简单地添加一个min 指令？

标签： angular angular-directive

【解决方案1】：

您可以在每个keydown 事件之后简单地将每个“0”替换为“1”，对吗？喜欢：

@HostListener('keyup', ['$event']) onKeyUp(event) {
    this.el.nativeElement.value= this.el.nativeElement.value.replace('0', '1');
}

演示供您参考：https://stackblitz.com/edit/angular-fndxsq

keyup我的来源：How can I get jquery .val() AFTER keypress event?

更多关于replace的信息：https://www.w3schools.com/jsref/jsref_replace.asp

【讨论】：

更改：我将此代码从 keydown 更改为 keyup，因为如果您想知道的话，它需要在按键后更改。
它工作正常，但我想再添加一个条件如果输入中的用户间值并清除它，那么仍然显示输入 1
为此，您可以使用onchange 事件并在它为空时做出反应。我认为这很简单。