Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

(keypress) event in ionic 4 not triggering

According to this link https://ionicframework.com/docs/api/input#events ionic supports keypress event which is working fine in the browser but in mobile device it is not triggering

html

<ion-item>
  <ion-label>Default Label</ion-label>
  <ion-input (keypress)="test($event)"></ion-input>
</ion-item>

ts

test(event){

console.log(event);
 e.preventDefault();
}

the above code works fine in ionic serve not in mobile device

According to this https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event keypress is depricated i am not understanding

Events i tried: keypress, keydown, keyup, ionblur, ionChange, input,..etc Either it is not working or it or preventdefault is not working

like image 748
Mohan Gopi Avatar asked Jul 08 '19 09:07

Mohan Gopi


2 Answers

According to your own first link I guess you are looking for the event ionInput Emitted when a keyboard input ocurred. :

<ion-item>
  <ion-label>Default Label</ion-label>
  <ion-input (ionInput)="test($event)"></ion-input>
</ion-item>
like image 144
Gilsido Avatar answered Sep 27 '22 20:09

Gilsido


Pass $event to your event handler. The $event is a DOM KeyboardEvent.

<input type=text (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
} 

If you know which KeyboardEvent property you want, you can pass that into your event handler:

<input type=text (keypress)="eventHandler($event.keyCode)">

eventHandler(keyCode) {...}
like image 20
Chanaka Weerasinghe Avatar answered Sep 27 '22 20:09

Chanaka Weerasinghe