ng-pattern-restrict icon indicating copy to clipboard operation
ng-pattern-restrict copied to clipboard

Allow mask support

Open AlphaGit opened this issue 10 years ago • 2 comments

Provide the ability to create masks along with the input restriction. Something similar to https://github.com/RobinHerbots/jquery.inputmask

AlphaGit avatar Mar 11 '15 11:03 AlphaGit

I want to participate. Any ideas of how to implement this feature?

Yankovsky avatar Mar 19 '15 10:03 Yankovsky

@Yankovsky Welcome!

jQuery already has great plugins that provide this functionality, for which the source code can be found here:

  • https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/src/jquery.mask.js
  • https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.0/dist/jquery.maskedinput.js

Based on it, I'd ask (and investigate an answer for) the following questions:

  1. Would we need to use mask expressions, or can we detect literals in Regexes?
  2. Every time the value changes, we need to find which is our position in that regex
    1. If we're into a delimiter position, and the regex allows no more values before the delimiter, advance the cursor and include the delimiter into the string
    2. What to do if the regex allows for more values? E.g. \d{0,4}-?\d{5} and our string is currently 123| (| would be the cursor).
  3. How does the API restriction on non-type-text inputs affect us here? Should we "disguise" every input as a type=text? (This is something I was actively avoiding, in order not to affect mobile UX and play nice with other directives.)
  4. Can we show the mask beforehand, or do we need to calculate it on the fly? Since not every regex will have a fixed number of values before delimiters, can we even determine where they should be placed? (Related to 2.2.)
  5. How does #15 affect us here?

AlphaGit avatar Mar 19 '15 11:03 AlphaGit