Angular input digit angular directive supporting virtual keyboard

Here I want to show my experience about creating a directive for text input to allow user only enter digit input. I have tried to support most of popular browser such as Chrome, Firefox, IE (v11).

Problem

Supporting browsers it’s not the only problem, also virtual keyboard for some languages like Chinese and Japanese could be a big trouble in filtering user input. Why? Because on key events (keyDown, keyUp) we always receive key code 299 on any key press which shows virtual keyboard is enable. So we can avoid user not to input every character. It’s the most reason why I created my own directive to solve this issue and I only have input digits from user.

Another issue is the time you need to put some sign like ( ‘,’ or ‘.’) for float number or separate each three digits.

Import NgDigits

Example

You can set appDigits directive on your input element. The string in array follow angular number pipe format.

Also ng-digits take care of maximum digits user is allowed to enter. In this case ng-digits calculate the fraction part with maxDigits. As a result for Integer part user only can enter (fraction part — maxDigits) = 2 digits.

Also you can try with virtual keyboard for Japanese language. ng-digits filter user input to proper input.

Replace Japanese numbers with English number

I plan to support other language for virtual keyboard in near future.