CODEWITHSUNDEEP
htmlcordovajquery-mobile
red23jordan
red23jordan

Reputation: 2891

Show numeric keyboard in iPhone using input text

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

enter image description here

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.

Upvotes: 21

Views: 46755

Answers (7)

Guilherme Samuel
Guilherme Samuel

Reputation: 549

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)

enter image description here

Iphone 8 (iOS 11.4)

enter image description here

Iphone 6 (iOS 8.1)

enter image description here

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

enter image description here

Upvotes: 2

Jeff Monteiro
Jeff Monteiro

Reputation: 755

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.

:)

Upvotes: 15

Behnam
Behnam

Reputation: 6459

use this code:

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

Upvotes: 6

Jhonatan Muller
Jhonatan Muller

Reputation: 51

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

Upvotes: 0

davidelrizzo
davidelrizzo

Reputation: 733

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.

iOS number keyboards compared

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)

Upvotes: 25

Harry
Harry

Reputation: 4946

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.

Upvotes: 3

Venkat Reddy
Venkat Reddy

Reputation: 1052

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

Upvotes: 0

Related Questions