I am creating input in ionic which accepts only numbers. This works on all browsers and devices except for safari and ipad. i dont want the user to input anything other than numbers.I tried to do regex validation on input event but that does not stop the user from typing in alphabets. I tried keydown event but I dont get the innerText on keyDown event. please help
I know this is an old question, but I happened to have the same problem, and I noticed that the what worked for me in the end hasn't been provided as an answer, so I'll add the answer for the next guy.
<input type="number" min="0" inputmode="numeric" pattern="[0-9]*" title="Non-negative integral number">
This site explains the reasoning behind the solution in case you are interested.
The gist of it is that pattern="[0-9]*"
is what triggers iOS to display a numeric keypad, while min
and numeric
are there to make sure that other OSes and browsers still work well with type="number"
.
Edit: iOS 12.2 for the iPad no longer supports the pattern="[0-9]*"
fix - perhaps use type=tel
instead.