input type number not working on ipad
You can try this
<ion-input type="tel" inputmode="numeric" pattern="[0-9]*"></ion-input>
This'll force the input to be on numeric mode on iOS and the regex is just to ensure it'll get only numbers. As far as i know this won't work with input="number"
, but this is a old solution (that still works for me). So you can try with number
and, if it doesn't work, fall back to tel
.
Hope this helps :D
This worked for me:
<!-- HTML ->
<input type="number" onchange="allowOnlyNumbers()"/>
// js
function allowOnlyNumbers(e){
// check input using regex
var regex = RegExp(/[0-9]+/g);
const test_result = regex.test(e.target.value);
if(test_result){
e.target.defaultValue = e.target.value;
}else{
e.target.value = e.target.defaultValue;
}
}
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.
if you can please provide a sample code of your input. But you can try this also
<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", "number", "search", "tel", or "url". As the Input Type. Im sorry if i have mistaken your question. please try and provide a code sample. Thanks :)