0

I am trying to apply masked input plugin ( jquery.maskedinput.min.js ) to a password field in order to create : 

****-****-****

It is basically a registration key separated by dashes.

 $(document).ready(function(){
        $("#registrationKey").mask("9999-9999-9999");

        $("#registrationKey").keyup(function(e) {
              self = $(this);
              rkValue = self.val().replace(/[^\d\-]/g, '');
              self.val(rkValue);
              console.log("value = " + rkValue);
              self.attr("regKey", rkValue);
        });
});

<input type="password" id="registrationKey" name="registrationKey" regKey="" maxlength="15" autocomplete="off" >

I am having 2 problems. First one is that the field is already populated due to mask being applied. Second problem is it won't apply a dash after every 4th digit.

Is there a way to accomplish this via pure javascript or via this plug-in?

By the way, I have seen something similar in another post. However, it is very buggy if a user places the mouse in the middle of the field, or highlights some section of the text and deletes it.

Any ideas?

thanks

CFNinja
  • 3,571
  • 4
  • 38
  • 59
  • Would be surprised to do that with a input type password. The brower is the boss always showing the dots there. If you really need this you use multiple input fields or a single text field where you can fake password characters. – Sam Segers Jun 18 '16 at 01:08

1 Answers1

0

I was just doing something similar for a project I'm working on. I used a standard text input with the mask specified as the default value, with some code for the events keydown and paste. It doesn't work with pasted text, but it'll prevent users from altering the mask by pasting something into the field.

Here you can find a JSFiddle example: https://jsfiddle.net/apy5am74/.

Max Barbieri
  • 21
  • 1
  • 6