<input type="number"/> is not showing a number keypad on iOS

Question

According to Apple's documentation when I setup an input element with a type of number I should get a number keypad.

<input type="number"/> 

number: A text field for specifying a number. Brings up a number pad keyboard in iOS 3.1 and later.

Looks damn near impossible to mess up. However, when I view this simple fiddle on my iPhone or the simulator (both iOS6) the number keypad does not appear, and I get the standard alphabetic keyboard instead.

http://jsfiddle.net/Cy4aC/3/

What on earth could I possibly have messed up here?

Answer 1

You need to specify the pattern:

<input type="number" pattern="\d*"/> 

As a number can be negative or with floating point, so the - and . and , should be available in the keyboard, unless you specify a digits only pattern.

Answer 2

As of ios 12.2 (released March 25, 2019) this solution will work and it is the simplest to implement

<input type="number" inputmode="decimal"/> 

This will bring up only the number key pad without the #+* characters that come with using input="tel"