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
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...