html - Why does input type=number allow multiple decimals?

Question

I understand why number inputs allow "e" or "E", but I'm confused as to why it allows multiple decimals.

If you look at the specification for valid floating-point numbers, you get:

A string is a valid floating-point number if it consists of:

1. Optionally, a "-" (U+002D) character.
2. One or both of the following, in the given order:
   1. A series of one or more ASCII digits.
   2. 1. A single "." (U+002E) character.
      2. A series of one or more ASCII digits.
3. Optionally:
   1. Either a "e" (U+0065) character or a "E" (U+0045) character.
   2. Optionally, a "-" (U+002D) character or "+" (U+002B) character.
   3. A series of one or more ASCII digits.

Everything I see here indicates that only a single decimal point should be allowed in the input, and that decimal has to be included before specifying an exponent with "e", and that there can only be one "e", regardless of case.

Yet, inputs such as these are allowed:

• 1.....2
• ......
• eeee........
• 1.0.0.01.0

And so on.

In IE 11, it'll let me type in whatever string I what, but unless it's a "valid" number the .value is "". In this case, 1......e is valid, but eeeeee is not. If IE determines the value is not valid, then on focus away from the input the display blanks out, preventing the user from modifying the existing input.

In Chrome 51, it will only let me type digits, +/-, e/E and ".". When I check the value of input like 10.0. with an extra decimal, it still returns the value of 10.0, but if I type 10.0.0 or 10.. the string reverts to empty. Chrome will preserve displaying the invalid input.

When the strings become empty, it prevents doing further validation checks of the input and giving helpful user feedback.

So, why are multiple decimals allowed in the number input fields to begin with, and why are they handled so oddly between browsers?

Answer 1

I did some digging, and I have a hunch that this may be a bug in Chrome's implementation of the number input.

Here's the changeset where they fixed which characters were allowed in an input of type number.

Of note is this line:

event->setText(locale().stripInvalidNumberCharacters(event->text(), "0123456789.Ee-+"));

That means that 0123456789.Ee-+ are all legal characters according to Chrome. Everything else gets stripped out, but those characters are allowed through. However, there's no checking on whether or not the value of the input is a real actual number and you can enter nonsensical strings made up of those characters and have those strings still be considered valid (e.g. +++111ee... or ++++ or ...+++...+++...+++123321 or anything like that).

In the original ticket for the issue of number inputs allowing any characters, it seems this might be the author's intent. You can check the original issue on Chromium's issue tracker.

Either way, it might be worth filing a bug report with the Chromium project to let them know that something funky is going on.