手机号码键盘无法在 Iphone 中使用

Question

I'm developing a web app that is an online shop of gym plans, as it is a web app, it will run on both pc and mobile, but i'm having a little problem with the numeric keyboard in mobile (when you put the type of the input as number), it works in any browser in android, but when i try in Iphone, it opens the regular keyboard.

The code is very simple actually. It's a simple form about the way of payment.

<form>
    <div class="form-group">
        <label for="cardOwnerName">Owner's Name</label>
        <input type="text" id="cardOwnerName" />
    </div>
    <div class="form-group">
        <label for="cardNumber">Card's Number</label>
        <input type="number" id="cardNumber" />
    </div>
    <div class="form-group">
        <label for="cardExpire">Expire Date</label>
        <input type="date" id="cardExpire" />
    </div>
    <div class="form-group">
        <label for="cardCVV">CVV</label>
        <input type="number" id="cardCVV" />
    </div>
</form>

So, when i execute this code in an android celphone, when i click in the cardNumber's field the numeric keyboard opens, but when i execute the same code in my IOS, it doesn't open.

Is there anything i have to do besides put the input as number to it to work in Iphones?

Answer 1

Compatible with Android and iOS is "inputmode".

Try <input inputmode="numeric" pattern="[0-9]*" type="text" id="cardNumber">