Bug 161506 – [iOS] input pattern="[0-9.]*" should use DecimalPad keyboard

• Component: Forms
• Status: RESOLVED DUPLICATE

[Darryl Pogue]

Currently <input type="number" pattern="[0-9]*"> pulls up a UIKeyboardTypeNumberPad, which does not allow decimals. The alternative is to not specify a pattern and get the general numbers & punctuation keyboard.

It would be great to add support for pattern="[0-9.]*" to bring up a UIKeyboardTypeDecimalPad which includes a decimal key.


Unfortunately there isn't numeric-oriented keyboard that includes both a decimal and a negative sign, so we're stuck with UIKeyboardTypeNumbersAndPunctuation :(

[Darryl Pogue]

Created attachment 287932 [details]
Patch

[Darin Adler]

Seems like a reasonable improvement; the decision on this should be made by an iOS keyboards expert.

[Alex Christensen]

Comment on attachment 287932 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=287932&action=review

I like this idea.  Can this be tested?

> Source/WebKit2/WebProcess/WebPage/ios/WebPageIOS.mm:2517
> +static const char inputPatternNumber[] = "^(\\[0-9\\]|\\\\d)(\\+|\\*|\\{[0-9,]+\\})?$";
> +static const char inputPatternDecimal[] = "^(\\[0-9\\]|\\\\d)?(\\+|\\*|\\{[0-9,]+\\})?\\\\\\.(\\[0-9\\]|\\\\d)(\\+|\\*|\\{[0-9,]+\\})?$";

This is clever, but matching regular expressions with regular expressions seems like a step in the wrong direction.  We were doing string comparison before, which wasn't the greatest, but could we at least continue to do string comparison?

[Darryl Pogue]

I agree the regex isn't an ideal solution. I was trying to brainstorm something more flexible than string comparisons though, and this was the best I came up with.

One complaint of the current string comparison whitelisting is that it makes it hard for people to use the pattern attribute for actual validations. If you want to collect a 5-digit number, the best pattern would be "\d{5}", but that causes iOS to opt-out of the number pad keyboard because it doesn't match the whitelist.


It's not obvious what the string comparison should be for a decimal pad, since the naïve "[0-9\.]*" would actually allow multiple decimal points to validate. Suggested patterns from online resources include "\d*\.\d*" or "[0-9]*\.[0-9]*", but both of those make the decimal point required.

[Brad]

The testing of the regular expression with another regular expression seems much more useful to me than extreme limits that are there now.

I would like to use patterns like this:

\d+(\.\d*)?     // decimal number
\d+(\.\d{2})?   // dollars with optional cents
((\d+)?(\.\d{2})?)+   // optional dollar digits with optional cents

Etc. Or maybe an expression for validating IP addresses.

[Brady Eidson]

Comment on attachment 287932 [details]
Patch

Patches that have been up for review since 2016 are almost certainly too stale to be relevant to trunk in their current form.

If this patch is still important please rebase it and post it for review again.

[Darryl Pogue]

As an alternative to this (and of trying to use pattern to determine the correct keyboard in general), it might be better to add support for the `inputmode` attribute which would allow authors to specify a hint for which keyboard type to use:
https://html.spec.whatwg.org/multipage/interaction.html#input-modalities%3A-the-inputmode-attribute

There was a recent intent to ship for Blink/Chrome: https://groups.google.com/a/chromium.org/forum/#!searchin/blink-dev/inputmode/blink-dev/MAHQkH4vvUQ/i0yCobrMCQAJ

[Dayton Lowell]

I’ve created a bug for adding `inputmode` support.

https://bugs.webkit.org/show_bug.cgi?id=183621

[Darryl Pogue]

inputmode support was just merged, and provides a way to get a decimal keyboard via inputmode="decimal", so I'll close this as a duplicate of #183621

*** This bug has been marked as a duplicate of bug 183621 ***