I'm using angularjs for a app I'm working on.
I need an input field with a specific length of characters a user has to enter.
To indicate how long the input should be, I would like to have an input field that indicates the number of characters by asterisks event if the user already typed something into it (so it should not just be a placeholder that goes away as soon as the user typed something in!).
For example (I is indicating the cursor position):
User sees the form the first time: *****
User clicks into the input field: I*****
User enters the first character (e.g an e): eI****
User enters some more characters: equI**
User entered all 5 characters: equalI.
What I have so far is visible in the jsfiddle here. The problem here is, that the cursor is not positioned at the right position and that the validation is not working so far.
Has anyone an idea how to fix that?
Thanks a lot!
Setting cursor positions in a browser independent way would be "fun" however some people have done it checkout Set cursor at a length of 14 onfocus of a textbox
You can add the setCaret/setCursor function. I am think this can be best called on keydown event inside your directive.