(keypress) event in ionic 4 not triggering

Question

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

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

Facing the same issue. neither (ionInput) nor (keypress) works. Did you find a way in order for it to work? — mluis, Aug 12 '19 at 09:49

score 5 · Answer 1 · answered Jul 08 '19 at 09:24

5

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>

answered Jul 08 '19 at 09:24

Gilsido

no i dont want any value to be displayed as you can see i have given `event.preventDefault()` – Mohan Gopi Jul 08 '19 at 10:35
And `event.preventDefault()` doesn't work with `ionInput`? If it doesn't I'd try catching the keyboard events with a `@HostListner()` but it may not be the cleanest way – Gilsido Jul 08 '19 at 11:14

score 2 · Answer 2 · answered Jul 08 '19 at 09:25

2

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) {...}

answered Jul 08 '19 at 09:25

2

the above code works fine in browser as i have mentioned it is not firing in mobile device – Mohan Gopi Jul 08 '19 at 10:34

3960278 · Answer 3 · 2019-07-08T10:58:24.133

0

Use readonly attribute with ionInput event from @Gilsidoo answer, or other event as keyPress which might work in ur case.

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

EDIT: I suppose onInput with readonly will not work, try using keyup may be.

edited Jul 08 '19 at 10:58

answered Jul 08 '19 at 10:48

3960278

3 Answers3