javascript - “仅限数字指令”在 Chrome 49.xx.xx 及更低版本中不起作用

Question

我正在使用 Angular 6，并编写了一条指令，将某些输入字段的输入限制为仅数字。该指令看起来像这样

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

@Directive({
  selector: '[NumbersOnly]'
})

export class NumbersOnlyDirective {
  // Allow decimal numbers and negative values
  private regex: RegExp = new RegExp(/^-?[0-9]+(\.[0-9]*){0,1}$/g);
  // Allow key codes for special events. Reflect :
  // Backspace, tab, end, home
  private specialKeys: Array<string> = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Tab', 'End', 'Home'];

  constructor(private el: ElementRef) { }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }
    const current: string = this.el.nativeElement.value;
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

无论我在哪里有输入字段，我都会使用如下指令

<input [(ngModel)]="sendLinkMobile" NumbersOnly type="text" id="mobile-num"  
class="form-control m-no" placeholder="Mobile Number"  requried  minlength="10" 
maxlength="10" aria-label="Recipient's username" aria-describedby="basic-addon2">

该代码可以在所有最新的浏览器、手机、选项卡中完美运行。但是，在 chrome 49.xx 及更低版本上使用它时，输入字段不会采用任何值。谁能帮我看看问题出在哪里？

提前致谢。

Answer 1

使用 it 指令并检查它。我认为它适用于 chrome 49.xx

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;
    if (this.OnlyNumber) {
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+V
        (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
        // 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"  type="text" #numberModel="ngModel" [(ngModel)]="numberModel"  name="numberModel" />