title: How can I restrict the entry of special characters in ionic 3 text input in my cordova app?
body: <p>I have tried to restrict the entry of special characters in my Ionic input field. For eg., Here's my input field for a mobile number that should allow only numeric character on the input. It should block all the special characters and it should not allow the letters (a-z and A-Z). I have already tried with onlyNumber directive as mentioned here. But it doesn't work out.</p>
  
  <p>I would like to have is that if it's an input field such as the mobile number and Landline number., it should block all the special characters and alphabets (should allow only numbers). </p>
  
  <p>Here's what I have tried so far</p>
  
  <p>my sample-input.html:</p>
  
  <pre><code>&lt;ion-input type="tel" onlyNumber  class="mydate" [(ngModel)]="vm.landLineNumber" (tap)="landlinenos()" minlength="12" maxlength="12"
                                 formControlName="landline" tabindex="1" (keyup)="moveFocus($event,password, false)"&gt;&lt;/ion-input&gt;
  </code></pre>
  
  <p>My onlyNumber directives.ts:</p>
  
  <pre><code>import { Directive, ElementRef, HostListener } from '@angular/core';
  
  @Directive({
    selector: '[onlyNumber]'
  })
  export class OnlyNumber {
  debugger;
    constructor(private el: ElementRef) {}
  
    @HostListener('keydown', ['$event'])
    onKeyDown(event) {
      debugger;
  
      let e = &lt;KeyboardEvent&gt; event;
      if ([46, 8, 9, 27, 13, 110].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 &amp;&amp; e.ctrlKey) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 &amp;&amp; e.ctrlKey) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 &amp;&amp; e.ctrlKey) ||
        // Allow: home, end, left, right
        (e.keyCode &gt;= 35 &amp;&amp; e.keyCode &lt;= 39)) {
        // let it happen, don't do anything
        return;
      }
      // Ensure that it is a number and stop the keypress
      if ((e.shiftKey || (e.keyCode &lt; 48 || e.keyCode &gt; 57)) &amp;&amp; (e.keyCode &lt; 96 || e.keyCode &gt; 105)) {
        e.preventDefault();
      }
  
    }
  
    @HostListener('contextmenu', ['$event'])
    onMouseRightClick(event) {
      if (event.which === 3) {
        let e = &lt;MouseEvent&gt;event;
        e.preventDefault();
      }
    }
  }
  </code></pre>
  
  <p>And here's how I have called in shared.module.ts:</p>
  
  <pre><code>import { OnlyNumber } from './directives/onlynumber.directive';
  @NgModule({
      imports: [
  
    ],
    declarations: [
      OnlyNumber
    ],
      exports: [
          ComponentsModule
      ]
  })
  
  
  export class SharedModule { }
  </code></pre>
  
  <p>I have also tried by specifying it in imports and exports, it shows me error as a please ngmodule annotation. When I removed from imports &amp; exports, it's working fine without errors., but my requirement is not working as expected.</p>