CODEWITHSUNDEEP
javascriptjqueryangularjs
Samuel Davidson
Samuel Davidson

Reputation: 791

Static hyphens within an input

The input I am working on is for SSNs. I would like an input with hyphens already in place and the user simply needs to type his/her 9 digit SSN and the numbers space themselves around the hyphens.

Here is a crappy paint drawing of what I mean:

enter image description here

These are pretty common in product key entry and other forms like that. I am having a difficult time thinking of how to make one from scratch. I am moderately skilled in HTML, AngularJS, and I know a little JQuery. The input is in its own AngularJs directive for reusuability's sake so that controller is available to do any logic.

I was considering using 3 inputs squished together or some input filtering but I am not sure. If there is already some public lightweight code on github or elsewhere that would be great too.

A goal of this too is to leave the ng-model in tact where it is only a 9-digit number and not containing any hyphens.

Thanks!

Upvotes: 0

Views: 111

Answers (1)

Ovais Reza
Ovais Reza

Reputation: 86

Why not use Angular module something like, you can see a preview here

https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html

Upvotes: 3

Related Questions