input type number not working on ipad

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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 :)

Answer 4

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;
    }
}