AngularJS number input formatted view
I want to use a formatted number input to show thousand seperator dots to user when he types big numbers. Here is the directive code that I used: http://jsfiddle.net/LCZfd/3/
When I use input type="text" it works, but when I want to use input type="number" it's weirdly cleaning by something when user typing big numbers.
What is problem about input[number]?
Answer
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.