title: Angular digits only directive still allows some characters to be written
body: <p>While I was researching how to best do the digits only directive on the internet, I found the following result close to my own solution:</p>
  <pre class="lang-js prettyprint-override"><code>import { Directive, ElementRef, HostListener } from '@angular/core';
  
  @Directive({
    selector: '[appOnlyDigits]'
  })
  
  export class OnlyDigitsDirective {
    private navigationKeys = [
      'Backspace',
      'Delete',
      'Tab',
      'Escape',
      'Enter',
      'Home',
      'End',
      'ArrowLeft',
      'ArrowRight',
      'Clear',
      'Copy',
      'Paste'
    ];
  
    inputElement: HTMLElement;
  
    constructor(public el: ElementRef) {
      this.inputElement = el.nativeElement;
    }
  
    @HostListener('keydown', ['$event'])
    onKeyDown(e: KeyboardEvent) {
      if (
        this.navigationKeys.indexOf(e.key) &gt; -1 || // Allow: navigation keys: backspace, delete, arrows etc.
        (e.key === 'a' &amp;&amp; e.ctrlKey === true) ||   // Allow: Ctrl+A
        (e.key === 'c' &amp;&amp; e.ctrlKey === true) ||   // Allow: Ctrl+C
        (e.key === 'v' &amp;&amp; e.ctrlKey === true) ||   // Allow: Ctrl+V
        (e.key === 'x' &amp;&amp; e.ctrlKey === true) ||   // Allow: Ctrl+X
        (e.key === 'a' &amp;&amp; e.metaKey === true) ||   // Allow: Cmd+A (Mac)
        (e.key === 'c' &amp;&amp; e.metaKey === true) ||   // Allow: Cmd+C (Mac)
        (e.key === 'v' &amp;&amp; e.metaKey === true) ||   // Allow: Cmd+V (Mac)
        (e.key === 'x' &amp;&amp; e.metaKey === true)      // Allow: Cmd+X (Mac)
      ) {
        // let it happen, don't do anything.
        return;
      }
      // Ensure that it is a number and stop the keypress.
      if (
        (e.shiftKey || (e.key &lt; '0' || e.key &gt; '9')) &amp;&amp;
        (e.key &lt; 'numpad 0' || e.key &gt; 'numpad 9')
      ) {
        e.preventDefault();
      }
    }
  
    @HostListener('paste', ['$event'])
    onPaste(event: ClipboardEvent) {
      event.preventDefault();
      const pastedInput: string = event.clipboardData!
        .getData('text/plain')
        .replace(/\D/g, ''); // get a digit-only string
      document.execCommand('insertText', false, pastedInput);
    }
  
    @HostListener('drop', ['$event'])
    onDrop(event: DragEvent) {
      event.preventDefault();
      const textData = event.dataTransfer!.getData('text').replace(/\D/g, '');
      this.inputElement.focus();
      document.execCommand('insertText', false, textData);
    }
  }
  </code></pre>
  <p>But when I press Shift+3 twice in a row, it allows typing '^' character. And sometimes it also writes the '+' character.</p>
  <p>How can I fix this problem without changing the directive structure?</p>