Introduction

HTML5 Number inputs have been the bane of my existence since they have come out. They are the standard field for when expecting a number, be it an integer or a floating point number, and have been implemented: to show a numeric keyboard with on screen keyboard devices, to be able to be configured with a maximum and minimum, and with an ability to step the number up and down a set step value.

Outside of these features however, lies the dark side of the input. Enter a valid number and all is hunky dory. Enter a invalid value however, and you get '' — zip, nada, nothing, blank. No way to check if it is almost valid or to try and correct it.

There are partial solutions, such as using the pattern attribute on text inputs. This however, does not give numeric keypad on Android and depending on the pattern, gives the number and symbol keypad on iOS devices.

The closest I could find to what I wanted was the telephone input type.

Number Type:

Text input with pattern \\d\*:

Text input with pattern 0-9:

Text input with pattern 0-9.:

Text input with pattern 0-9.-:

Tel Type:

Tel Type with pattern -?0-9\(\.0-9+)?: