NumbersOnly指令-检测复制和粘贴键盘组合

Question

我创建了一个Angular指令，仅允许在输入文本框中输入数字值。效果很好，但是我无法检测到复制并粘贴键盘快捷键ctrl + c和ctrl + v。

在下面的onKeyDown HostListener中的代码中，我认为检查应该在其中。我可以使用e.keyCode添加检查，如下所示：

            // Allow: Ctrl+C
            (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+V
            (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||

但是不建议使用keyCode，因此需要替代方法。我已经使用EventEmitter尝试了ctrl + c和ctrl + v键的hostListener，但是我不确定这是使用的方法。

这是我的指令：

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

@Directive({
  selector: '[numbersOnly]'
})
export class NumbersOnlyDirective {

  private clipboardSanitisationRegex: RegExp = new RegExp(/[^0-9\.]/g);

  // Allow decimal numbers and negative values
  private allowableCharactersRegex: 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) {
    debugger;
    // Sanatize clipboard by removing any non-numeric input after pasting
    this.el.nativeElement.onpaste = (e:any) => {
      e.preventDefault();
      let text;
      let clp = (e.originalEvent || e).clipboardData;
      if (clp === undefined || clp === null) {
        text = (<any>window).clipboardData.getData('text') || '';
        console.log('text = ' + text);
        if (text !== '') {
          text = text.replace(this.clipboardSanitisationRegex, '');
          if (window.getSelection) {
            let newNode = document.createElement('span');
            newNode.innerHTML = text;
            window.getSelection().getRangeAt(0).insertNode(newNode);
          } else {
            (<any>window).selection.createRange().pasteHTML(text);
          }
        }
      } else {
        text = clp.getData('text/plain') || '';
        if (text !== '') {
          text = text.replace(this.clipboardSanitisationRegex, '');
          document.execCommand('insertText', false, text);
        }
      }
    };
  }
  @HostListener('keydown', [ '$event' ])
  onKeyDown(event: KeyboardEvent) {
    debugger;
    // Allow Backspace, tab, end, and home keys
    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.allowableCharactersRegex)) {
      event.preventDefault();
    }
  }
}