0

Consider the following picture

enter image description here

The above is a text field, that limit the user input to the number only.

For example

$x.xx

only x is allow to change, while . and $ is not allowed to change.

I was thinking of having 3 ng-models that control each digit. But input box element doesn't play nicely with positioning 3 three separate elements, while allowing user to edit.

Here are the requirements.

1. The user can directly input in the text box
2. Only number can be entered 
3. only the number position can be changed.

Is there an easy way to do this via angular?

Isaac
  • 11,409
  • 5
  • 33
  • 45
testing
  • 2,303
  • 4
  • 20
  • 32
  • "*only the number position can be changed.*".. what do you mean? – developer033 Jul 28 '16 at 02:01
  • Consider using regexp to check the format of user input, and block invalid inputs using javascript `input` event –  Jul 28 '16 at 02:02
  • @SuperCoolHandsomeGelBoy But the user can still delete `.` or `$` sign though, if I replace it immediately the UI will flicker. – testing Jul 28 '16 at 02:03
  • Do you want to allow only numbers, dot and `$`? – developer033 Jul 28 '16 at 02:05
  • @developer033 OP wants the format of the input be like `$x.xx` –  Jul 28 '16 at 02:05
  • 1
    Possible duplicate of [HTML text input field with currency symbol](http://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol) – Isaac Jul 28 '16 at 02:06
  • I think you need to create your own library for this one. Maybe use html contentEditable attribute as subtitute for input and javascript for checking number input validation plus using click events for increment and decrement button – ralcazar Jul 28 '16 at 03:58

0 Answers0