According to this link 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 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
According to this link https://ionicframework./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/en-US/docs/Web/API/Document/keypress_event keypress is depricated i am not understanding
Share Improve this question edited Jul 8, 2019 at 10:36 Mohan Gopi asked Jul 8, 2019 at 9:12 Mohan GopiMohan Gopi 7,72418 gold badges69 silver badges118 bronze badges 1Events 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 Commented Aug 12, 2019 at 9:49
3 Answers
Reset to default 5According 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>
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) {...}
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.