只有数字和十进制指令不起作用 - Angular 4答案

【问题标题】：Only numbers and decimal Directive not working - Angular 4只有数字和十进制指令不起作用 - Angular 4
【发布时间】：2018-09-03 18:04:59
【问题描述】：

我正在制定一个只允许十进制数字的指令，并且最多只能有 2 位。

但它没有按预期工作。 Stackblitz 可以在下面找到

Stackblitz Link

我面临的错误如下：

我无法使用 F5 或 ctrl + A、ctrl + V、ctrl + R 等
一旦你在输入框中输入了类型，然后将光标移动到小数点前，你将无法输入:(
此解决方案在 Safari 浏览器 iPad 中不起作用（为什么？）

【问题讨论】：

监听和阻止 keydown 事件并不是一个好习惯。试着听一下 change-event，这将解决你所有的热键问题。
请你做一个stackblitz好吗
@GiacomoVoß 这对我来说是同样的想法，因为某些原因 onchange 不起作用。实际上它有效，但失去了焦点。
没关系。 Change-Event 只会在模糊时触发，而不是在您按下键时触发。

标签： angular

【解决方案1】：

试试这样的：

DEMO

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

@Directive({
  selector: '[appDecimalNumber]'
})
export class DecimalNumberDirective {
  constructor(private el: ElementRef) { }

  @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
    let e = <KeyboardEvent>event;

    if ([8, 9, 13, 27, 46].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();
    }
  }

  @HostListener('keyup', ['$event']) onKeyup(event: KeyboardEvent) {
    this.validateFields(event);
  }

  @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
    this.validateFields(event);
  }

  //Todo For limit Parse Int
  validateFields(event) {
    setTimeout(() => {
      let numberRegEx = /^[0-9]+$/;
      if (!numberRegEx.test(this.el.nativeElement.value)) {
        this.el.nativeElement.value = "";
        event.preventDefault();
      }
    }, 100)
  }

}

【讨论】：

您现在可以检查一下吗？