Getting the value of a HTML5 number input

问题:

I'm using one of the new HTML5 input types, number:

<input type="number" />

In Opera, which is the only desktop browser I know of which currently recognises it, it renders it as such:

The problem I'm facing is one of validation. If a user types something invalid into the field, eg: "abc", the value returned by myInput.value is an empty string. This makes it impossible to tell whether the user left the field blank, or if they entered some incorrect data. Is there any way to get the real value of the field?

回答1:

The HTML5 draft defines:

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.

Reference¹

I suppose you'd have use a default value of "0" to make sure the field was left untouched or if something invalid was entered, since there seems to be no obvious way to differentiate the two.

After reading up validation specs and some testing (in Opera 10.54) I concluded that:

<input id="email" type="email" value="blah">
document.getElementById("email").validity.typeMismatch // True

Doesn't work on <input type="number">. Not sure if it's supposed to, or if it's a work in progress. The property does however exist, though it always returns False.

Read more²

You can also set a custom validation method Reference³