As written in the comments, input type="number" doesn’t support anything but digits, a decimal separator (usually , or . depending on the locale) and - or e. You may still enter whatever you want, but the browser will discard any unknown / incorrect character.
This leaves you with 2 options:
- Use
type="text"and pattern validation likepattern="[0-9]+([\.,][0-9]+)*"to limit what the user may enter while automatically formatting the value as you do in your example. - Put an overlay on top of the input field that renders the numbers how you want and still allows the user to use the custom
type="number"input controls, like demonstrated here.
The latter solution uses an additional <label> tag that contains the current value and is hidden via CSS when you focus the input field.