Knockout's default value binding is great in most cases, but when using the new HTML5 <input type="number" /> element, it will always return an empty string when the input is a non-number i.e. contains anything but 0-9 and a decimal!

This is actually a byproduct of the number type's WHATWG specification

The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the empty string instead.

Luckily, the specification also provides a means of retrieving the input's value as a number, via the valueAsNumber property. When a non-numeric string is used, this will return NaN.

The solution

We can enhance Knockout's selectExtensions.readValue, which is utilised by the value binding to add support for this feature where possible:

Note: A byproduct of this implementation is that it will prevent people typing non-numeric characters! There's no easy way around this unfortunately...