时间戳

首页 > 解决方案 > Angular Directive 从 keydown 事件中获取剪贴板数据

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

问题描述

我创建了只控制数字输入的指令，现在我只想允许粘贴的数字数据。我打算做以下事情：检查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();
    }
  }
}

标签： angulartypescript

解决方案

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

<input type="number">

然后，当您提交表单时，

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

推荐阅读