微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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]*)?$/;

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。