angular 8仅接受数字自定义指令在台式机浏览器中工作，但不适用于移动chrome浏览器

问题描述

我创建了一个自定义指令，仅接受数字。在桌面浏览器和safari移动版中可以正常工作，但在移动chrome版中不能正常工作。

任何人都可以帮助我解决这个问题。在此先感谢

这是我的HTML和指令

  <input NumbersOnly  placeholder="{{ 'PlaceHolder.MobileNo' | translate }}" formControlName="mobileNo"  maxlength="7" >

import { Directive,ElementRef,HostListener,Input } from "@angular/core";
@Directive({
  selector: "[NumbersOnly]",})
export class NumbersDirective {
  // 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> = ["Backspace","Tab","End","Home","-"];
  constructor(private el: ElementRef) {}
  @HostListener("keydown",["$event"])
  onKeyDown(event: KeyboardEvent) {
    // Allow Backspace,and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }
    if (event.key.match(this.regex) == null) {
      event.preventDefault();
      return false;
    }
  }
}

解决方法

我看到您错过了正则表达式中的点。您不需要g修饰符，因为整个字符串必须匹配。

使用

private regex: RegExp = /^-?[0-9]+(?:\.[0-9]*)?$/;