peterc
peterc

Reputation: 7843

Angular directive with onkeypress not being called on Android phone

I have an Ionic 4 / Angular 7 application where I have the following custom directive:

    @Directive({
      selector: '[appNumeric]'
    })

    export class NumericDirective {
      //HostListener decorator handle event handlers for input (onKeyPress)
      @HostListener('keypress', ['$event'])

      public onkeypress(ev : any): void {  
        let isNumeric = ev.charCode >= 48 && ev.keyCode <= 57;
        if (!isNumeric)
          ev.preventDefault();      
      }
    }

And I apply this as follows

<ion-input appNumeric>

When I test running on Chrome on my PC (eg Ionic serve), it works fine, but when I run on the Android phone, it does not fire at all.

Why would this be so?

Upvotes: 1

Views: 728

Answers (1)

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

keypress doesn't work on mobile devices. Use ionInput to listen for input changes. Also, seems you just want to allow only numbers, right? So why not just <ion-input type="number">

Upvotes: 1

Related Questions