Show numeric keyboard in iPhone using input text

Question

Notice that using input type="number" can display a numeric keyboard as below:

Is it possible to use input type="text" to display the same numeric keyboard? I do not want to display a number pad using pattern="\d*" because it is possible that the value will contain a decimal place.

The reason I would like to use input type="text" instead of input type="number" is that I cannot get back the value if I input a non-number for a number field. For example, if I input ABC, it will become empty automatically. It seems to me that using input type="text" will be easier for this kind of control.

Answer 1

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)

Answer 2

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.

:)

Answer 3

use this code:

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

Answer 4

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.

Answer 5

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

Answer 6

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