AngularJS number input formatted view

Question

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 1

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 like pattern="[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.