允许 Ctrl+C 和 Ctrl+V 以及键盘快捷键

Question

我创建了一个指令来禁止用户在输入框中输入负值和特殊字符。 使用以下代码，用户无法通过键盘复制粘贴任何内容。另外，我需要注意，如果用户粘贴任何特殊字符，则应将其替换为空字符。

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

@Directive({
    selector: '[esg365-positiveNumbersOnly]'
  })
  export class NumbersOnlyDirective {

    private readonly regex: RegExp = new RegExp(/^\d+(\.\d{0,2})?$/);
    private readonly specialKeys: String[] = ['Backspace', 'Tab', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Delete', 'Home'];

    constructor(private readonly el: ElementRef) {
    }
    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
      console.log('Keyboard event is::',event);
      if (this.specialKeys.indexOf(event.key) !== -1) {
        return;
      }
      const current: string = this.el.nativeElement.value;
      const next: string = current.concat(event.key);
      if (next && !String(next).match(this.regex)) {
        event.preventDefault();
      }
    }

    
  }

Answer 1

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

@Directive({
  selector: '[esg365-positiveNumbersOnly]'
})
export class NumbersOnlyDirective {

  private readonly regex: RegExp = new RegExp(/^\d+(\.\d{0,2})?$/);
  private readonly specialKeys: String[] = ['Backspace', 'Tab', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Delete', 'Home'];

  constructor(private readonly el: ElementRef) {
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    if (this.specialKeys.indexOf(event.key) !== -1 ||
      // Allow: Ctrl+A
      (event.keyCode == 65 && event.ctrlKey === true) ||
      // Allow: Ctrl+C
      (event.keyCode == 67 && event.ctrlKey === true) ||
      // Allow: Ctrl+X
      (event.keyCode == 88 && event.ctrlKey === true) ||
      // Allow: Ctrl+V
      (event.keyCode == 86 && event.ctrlKey === true) ||
      // Allow: home, end, left, right
      (event.keyCode >= 35 && event.keyCode <= 39)
    ) {
      return;
    }
    const current: string = this.el.nativeElement.value;
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

或

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

@Directive({
  selector: '[esg365-positiveNumbersOnly]'
})
export class NumbersOnlyDirective {

  private readonly regex: RegExp = new RegExp(/^\d+(\.\d{0,2})?$/);
  private readonly specialKeys: String[] = ['Backspace', 'Tab', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Delete', 'Home'];

  constructor(private readonly el: ElementRef) {
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    if (this.specialKeys.indexOf(event.key) !== -1 ||
      // Allow: Ctrl+A
      (event.key == 'Select' && event.ctrlKey === true) ||
      // Allow: Ctrl+C
      (event.key == 'Copy' && event.ctrlKey === true) ||
      // Allow: Ctrl+X
      (event.key == 'Cut' && event.ctrlKey === true) ||
      // Allow: Ctrl+V
      (event.key == 'Paste' && event.ctrlKey === true) ||
      // Allow: home
      (event.key == 'Home' && event.ctrlKey === true) ||
      // Allow: end
      (event.key == 'End' && event.ctrlKey === true) ||
      // Allow: left
      (event.key == 'Left' && event.ctrlKey === true) ||
      // Allow: right
      (event.key == 'Right' && event.ctrlKey === true)
    ) {
      return;
    }
    const current: string = this.el.nativeElement.value;
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}