Force iOS Numeric Keyboard with Custom/Currency Pattern

Force iOS numeric keyboard with custom / currency pattern

For now, JavaScript is the only solution. Here's the simplest way to do it (using jQuery):

HTML

<input type="text">

JavaScript

$('input[type="text"]').on('touchstart', function() {
  $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
  $(this).attr('type', 'text');
});

The idea is simple. The input starts off and ends up with type="text", but it briefly becomes type="number" on the touchstart event. This causes the correct iOS keyboard to appear. As soon as the user begins to enter any input or leave the field, the input becomes type="text" once again, thus circumventing the validation.

There's one downside to this method. When the user returns to an input that has already been filled out, the input will be lost (if it doesn't validate). This means the user won't be able to go back and edit previous fields. In my case, this isn't all that bad because the user may want to use the calculator over and over again with different values, so automatically deleting the input will save them a few steps. However, this may not be ideal in all cases.

It looks like Mobile Safari supports the new HTML5 input type attributes of email, number, search, tel, and url. These will switch the keyboard that is displayed. See the type attribute.

So for example, you could do this:

<input type="number" />

And when the input box has focus, the number keyboard is shown (as if the user had the full keyboard and hit the "123" button.

If you really only want numbers, you could specify:

<input type="tel" />

And then the user would get the phone number dialing keypad.

I know this works with Mobile Safari -- I only assume it will work with UIWebView.

http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/

iPhone UIWebview: How to force a numeric keyboard? Is it possible?

It looks like Mobile Safari supports the new HTML5 input type attributes of email, number, search, tel, and url. These will switch the keyboard that is displayed. See the type attribute.

So for example, you could do this:

<input type="number" />

And when the input box has focus, the number keyboard is shown (as if the user had the full keyboard and hit the "123" button.

If you really only want numbers, you could specify:

<input type="tel" />

And then the user would get the phone number dialing keypad.

I know this works with Mobile Safari -- I only assume it will work with UIWebView.

iOS / iPhone type number keyboard to allow colon

Unfortunately the type=number input auto validates to ensure that only numbers are entered and this can't be bypassed and regex can't be used to allow for other submissions, so while the iPhone opens up a keyboard with the numbers on top, any value other than a real number will not be passed on.

Also unfortunate, is that type=text cannot default to show the numbers on the iPhone keyboard using html or javascript.

A work around is to set the type=number before the user enters their data (this pulls up the number keyboard in iOS), and then switch to type=text etc. after the user is finished entering data.

My solution was to use:

$('#myInput').on('focus', function() {
  $(this).attr('type', 'number');
});

$('#myInput').on('keydown blur', function() {
  $(this).attr('type', 'text');
});

This was a minor adaption from the answer by Vizllx on Force iOS numeric keyboard with custom / currency pattern

Show Decimal Keyboard in HTML5 iOS 7 / iOS 8

Checkout inputmode="decimal" starting on iOS 12.2

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

https://caniuse.com/#feat=input-inputmode

Show Decimal Keyboard in ReactJS for iOS

I solved my problem by adding the following line of code.

<NumberFormat id="numberFormat" decimalSeparator="," thousandSeparator="." inputMode="decimal" pattern="[0-9],*" .../>

But IOS Safari supporting version 12.2 or higher on inputMode="decimal" .

Thanks.

iOS reverting to expanded keyboard on certain pattern inputs

This seems to work:

<input type="text" maxlength="8" pattern="\d*">

---

Related Topics