Numeric input keyCode problem in android

Hello. I am trying to create an input which users can enter number 2 decimal digits after dot.

12 => true
22.3 => true
24.44 => true
24.244 => false

I am going to make instant calculation with this value so I need to restrict what user typed instantly.

<ion-input type="number" placeholder="100" [(ngModel)]="miktar" (keydown)="onMiktarChange($event)"></ion-input>

I tried do this with keyCode but . , and - are returning the same value (229) for my ion-input. Numbers values are correct. These logs are 1...9 - ,. respectively.

I tried to handle . and - in string at my .ts file with different events but I get undefined. Because of the type ="number" ionic can’t catch these characters.

Then I changed my input type number to text and I use regex to restrict input. This regex allows user to numbers and decimal 2 digits after one dot.


const MY_REGEXP =   /^[0-9]+([.]|[.][0-9]{1,2})?$/;
  onMiktarChange(num){   
    this.cdRef.detectChanges();
    let regex = new RegExp(MY_REGEXP);
    console.log(num.keyCode);
    if(!regex.test(num)){
        this.miktar = num.slice(0, -1);

    }

That was working cool until I realize kind of a bug. User can’t enter alphabetic characters but input allows to these characters when I press 100 or 120 times alphabetic characters. On the other hand user can press emoji button and put emoji into the input :slight_smile:

I did all kind of events (keydown) (keyup) (keypress) and (ngModelChange) I don’t think that the type of the event related to this problem. I am stuck. I really appreciate if you guys give me any advice to handle that problem. Thanks :blush:

You can simple use https://www.npmjs.com/package/ionic3-input-mask :wink:

is that issue resolved? i’m facing same issue