Директива NumbersOnly - обнаружение комбинаций клавиш копирования и вставки - PullRequest
0 голосов
/ 20 мая 2019

Я создал угловую директиву, которая позволяет вводить только числовые значения в текстовое поле ввода.Он работает нормально, однако я не могу заставить его обнаруживать комбинации клавиш быстрого копирования 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 теперь устарел, поэтому нужна альтернатива этому.Я пробовал использовать hostListener для клавиш ctrl + c и ctrl + v с помощью EventEmitter, но я не уверен, что это подход к использованию.

Вот моя директива:

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();
    }
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...