keypress event is not working in ionic 2 Android

Question

The keypress event is not fired in ionic 2 Android applications. The same is working fine with iOS and browser(chrome) platform. My requirement is to restrict the keyboard typing with some characters. ie, Don't want to show that characters which I typed in input field. The following code snippet as follows..

onKeyPress(event) {
    const pattern = /[0-9\.\ ]/;
    let inputChar = String.fromCharCode(event.charCode);
    if (!pattern.test(inputChar)) {
        event.preventDefault();
    }
}

:HTML

<input type="text" (click)="stopProcess()" (keypress)="onKeyPress($event)" />

The above function is not firing in android. Can anyone suggest me a solution for the same?

My feedback is that some phones can handle keypress, some cannot (even some with Android 8.0), looking for a solution workaround ... — Pierre, Jul 24 '18 at 05:17

score 0 · Answer 1 · answered Oct 04 '17 at 13:41

I usually use the JS key listener:

page.ts:

ionViewDidLoad() {
    document.addEventListener('keydown', (key) => {this.keydown(key)} );
}

keydown(key){
    console.log('Tadaaah')!
}

If you want to trigger events for each key, inside the function keydown(key), listen to the key.keyCode:

keydown(key){
  console.log(key.keyCode);
}

Press the keys you want to trigger the events, take notes and then add the functions:

keydown(key){
  if (key.keyCode == 13){
    this.functionA();
    return;
  }
  if (key.keyCode == 32){
    this.functionB();
    return;
  }
}

functionA() {
   console.log('Function A');
}

functionB() {
   console.log('Function B');
}

In summary

Your code should be like this:

  ionViewDidLoad() {
    document.addEventListener('keydown', (key) => {this.onKeyPress(key)} );
  }

  onKeyPress(key) {
    const pattern = /[0-9\.\ ]/;
    let inputChar: string = key.keyCode;
    if (!pattern.test(inputChar)) {
      event.preventDefault();
    }
  }

keypress event is not working in ionic 2 Android

1 Answers1

In summary

Linked