Input type number not working on ipad
I am creating an input in ionic that only accepts numbers. This works in all browsers and devices except safari and ipad. i don't want the user to enter anything other than numbers. I tried to do validation on event input, but that doesn't stop the user from typing alphabets. I tried the keydown event, but I am not getting innerText on the keyDown event. please, help
source to share
I know this is an old question, but I had the same problem and noticed that what worked for me at the end was not provided as an answer, so I'll add an answer for the following guy.
<input type="number" min="0" inputmode="numeric" pattern="[0-9]*" title="Non-negative integral number">
This site explains the reasons for the decision in case you are interested.
Its essence is that pattern="[0-9]*"
- that's what makes iOS to display a numeric keypad while min
and numeric
there, to make sure that other operating systems and browsers are still working well withtype="number"
source to share
if you can provide example input code. But you can also try this.
<ion-item>
<ion-label color="primary">Inline Label</ion-label>
<ion-input placeholder="Text Input" type="number"></ion-input>
</ion-item>
According to Ionic inputs
You can use "text", "password", "email address", "number", "search", "tel" or "url". As an input type. I am sorry if I am wrong in your question. try to provide a sample code. Thank:)
source to share
You can try this
<ion-input type="tel" inputmode="numeric" pattern="[0-9]*"></ion-input>
This will force the input to be in numeric mode on iOS, and the regex just to only get numbers. As far as I know, this won't work with input="number"
, but this is an old solution (which still works for me). So you can try with number
and, if it doesn't work, go back to tel
.
Hope this helps: D
source to share