Question

我创建了仅控制数字输入的指令，现在我想只允许粘贴的数字数据。我计划执行以下操作：检查clipbroad中的数据是否正常，否则跳过它。但我还没有找到从clipbroad获取数据的方法，所以我必须这样做

export class NumberOnlyDirective {
  private regex: RegExp = new RegExp("^[0-9]{0,8}([,.][0-9]{0,3})?$");
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];

  constructor(private el: ElementRef) {

  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event) {
    if (event.ctrlKey && event.key == "v") {
      return;
    }

    if (event.ctrlKey && event.key == "c") {
      return;
    }

    if (event.ctrlKey && event.key == "x") {
      return;
    }

    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    let current: string = this.el.nativeElement.value;
    let next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

Answer 1

为什么不依靠HTMl来做到这一点？

<input type="number">

然后，当您提交表格时，

if (isNaN(this.myControl.value)) {
  console.log('Not a number');
}

Angular Directive从keydown事件获取剪贴板数据

1 个答案: