angular-ui / ui-mask

Mask on an input field so the user can only type pre-determined pattern
https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html
MIT License
391 stars 257 forks source link

ip address mask #164

Closed AmarieEA closed 8 years ago

AmarieEA commented 8 years ago

I need a mask for block ip address range (example 192.168.70.18/20). For example:

<input ng-model="address" ui-mask="9?9?9.9?9?9.9?9?9.9?9?9/9?9" ui-mask-placeholder-char="_" placeholder="" ng-disabled="disabled"> The problem is so I can only enter this IP address: 192.168.125.254 I can not insert the dot separator after first or second symbol and enter less than three symbols in the section although I set mask like 9?9?9

jsFiddle: http://jsfiddle.net/Sheinar/Lvc0u55v/6133/

lukepfeiffer10 commented 8 years ago

I'm not sure what your issue is in this case. Looking at the mask you defined it appears it would accept any value from 0-9 with most of those characters being optional.

If your goal is to limit the range of allowable ip addresses you need to use ng-pattern or something like that to validate the input.

However, if you know the first 6 digits for each allowed IP address you could incorporate that into the mask definition i.e. ui-mask="1\92.168.999.999" if the first 6 for the IP address is 192.168 (the \ character is an escape character allowing the character behind it to not be interpreted by the maskDefinitions object).

AmarieEA commented 8 years ago

I'm probably not quite correctly described my problem. With the current mask, I can not enter fewer than nine characters. Although ip address may consist of less than nine characters. For example, if I want to enter ip address "192.168.70.18" I can not put a dot after "192.168.70"

lukepfeiffer10 commented 8 years ago

Yeah I don't think you will be able to get that functionality using ui-mask. Your best bet to try and validate the input would be to make a RegEx matching what your IP addresses can be and then use that in conjunction with ng-pattern.