Detecting if keys are available in onscreen keyboard of mobile device

Question

I'm adding some mobile usability optimisations to our site. As part of this I am tweaking the type attribute of textfields, to give the user the best input tools for the expected data type.

One issue I have come up against in touchscreen mobile devices is that browsers on different OSes, and even different browsers on the same OS, show different onscreen keyboards when input type="number" is used.

Safari on iOS 4.3.3 (iPhone 4) and Chrome on Android 2.3.4 include a decimal point, but Firefox on Android 2.3.4 does not.

I have tried adding the step attribute (step="0.1") with no improvement in Firefox.

If I cannot show the decimal point I will need to show Firefox the full QWERTY keyboard, which is obviously not going to make for the best user experience. It also raises the issue of browser/device sniffing. Either I'll need to make QWERTY the default, and show the numberpad to the handful of devices I can actually test on, or make numberpad the default, and switch back to QWERTY on devices which I know this will break on, the latter option being far less robust as I cannot test on every device ever made.

Testing for support for input type="number" is not a fix, as obviously the browser does support the element, it just doesn't offer enough keyboard options to enter all number types.

So.. I was wondering if anyone knew of a way to test for the presence of a certain key (such as the decimal point) in the keyboard the browser/OS assigns to the input type, and/or if anyone else has some better suggestions, as I'm quite new to mobile devices.

I should also mention that I am using JavaScript here, as this is a website, not a native App.

Thanks :)

Answer 1

Unfortunately, firefox does not support numeric input type. However, you can still try using these additional HTML attributes for making an input field prompt the user for numeric input

inputmode='numeric' 
pattern='[0-9]*'  //this makes it show only the numbers 0-9 without all the slashes and dashes and everything. Ignore this if that's not what you want