Show numeric keyboard in iPhone using input text

If your input is a true number, integer or decimal then use the HTML5 type="number" input. This will bring up correct keyboard on Android devices (assume Windows phone too).

Then the trick is to place a pattern="[0-9]*" on that attribute to force the special numeric keypad on iOS. Note that:

1. This will not mark a decimal or minus sign as invalid because the pattern attribute is actualy NOT valid on a type="number" field! and
2. This is the ONLY way to get the iOS numeric keyboard. See difference between the number section of the alpha keyboard (as in your screenshot above) compared to the true numeric keyboard.

One last note, be sure NOT TO use the type number field for inputs that are not true numbers (eg. zipcodes with leading zeros or product codes with comas or spaces). A numeric input field MAY NOT SUBMIT values that are not true numbers! (depending on browser/device)

The numeric keyboard provided by Apple on iOS is sad joke. But, you can fix this using:

inputmode="decimal"

Work fine on Android, off course.

:)

use this code:

<input type="number" pattern="[0-9]*" />

There are other types which can display numeric keyboard.

With type="number" you can do nothing. It won't accept anything but numbers. But if you use type="tel", it's an ugly hack, but it works.

Here's my zip code example:

<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6">

There will however be a problem with "-" key on some screen keyboards, you can work around this problem with adding the dash after specified number of characters in JavaScript like this:

// Zip Code dashes
$('input[type="tel"].zipCode').keyup(function(event) {
    var t = event.target, v = t.value;
    if (v.length == 2) { t.value = v + '-'; }
});

(Please excuse jQuery). Instead of using type="tel" you can use type="text" and pattern property, but I haven't tested it yet. Most likely it wouldn't work with most browsers.

I tested a few options on different iOS devices

The most supported way is to use the pattern attribute, e.g <input type="text" pattern="[0-9]*" />, since it works on several iOS versions:

Iphone 13 (iOS 15.1)

Iphone 8 (iOS 11.4)

Iphone 6 (iOS 8.1)

If you only need to support iOS 12.2+, using only the inputmode attribute works fine

I couldnt find any solution for that as of now.

But one possible trick you could do is use type="number" and change it in javascript with document.getElementById("element").type="text";

but however this would also clear the ABC but it would accept numbers commas and decimals

Try this workarround. Worked for me.

It will turn type to number then return back to text. This will force ios to switch to numeric keybord on the first prop change. The setSelectionRange is for select the input value.

$(function(){

    $("input[type='text']").on('mouseup', function(e){
        e.preventDefault();
    });

    $("input[type='text']").on('focus click', function(e){
        $(this).prop('type', 'number');
        var obj = $(this);
        setTimeout(function(){
            obj.prop('type', 'text');
            document.getElementById(obj.attr('id')).setSelectionRange(0, 9999);
        }, 50);     
    });
});