Partial masking of the password on the input field

Question

So, I need to mask the input field SSN #, say ssn 123-45-6789 , I need to display ***-**-6789 (in real time when entering each digit), but I still need to keep the original value for sending ,

I got to the point that I can do this if the user strictly enters a value, but it breaks if the user does something else, for example, deleting or moving the cursor to a random position and adding / removing numbers, copying the insert / delete, etc. d. I really don't want to listen to a bunch of events to make this work, even if it's possible.

I also tried to have the div sit on top of the input field to display the masked ssn, while the actual ssn was transparent / hidden behind it, but again they lose functionality, allowing you to add / remove / select delete / insert random parts (others then, when they start at the end), and also the cursor is not fully synchronized with the end of the ssn number (the problem with the asterisk was the problem). It also violated some mobile browsers.

I also thought about having two separate input fields, one type of password and one type of text, located next to each other, but again highlighting and deleting / pasting between them would be a problem.

Ideally, if there is something there to have an input field, there are two types, part of the value is the password type, and the rest is text of the type that would be fantastic. Btw this is for js app response.

TL; DR: requires a fully functional input field that will mask the password only from the first 5 digits of ssn and be plain text for the last 4 digits (if there is a full value of the plaintext to send).

Thanks!

Answer 1

It may be a little messy, but it works the way you want it, all in one text field, returns the full exact SSN (despite replacing the first 5 values ​​with markers) and allows editing anywhere in the field.

 <input type="password" id="ssn" maxlength=9 /> <script> var ssn = document.getElementById('ssn'); ssn.addEventListener('input', ssnMask, false); var ssnFirstFive = ""; var secondHalf = ""; var fullSSN = ""; function ssnMask(){ if (ssn.value.length <= 5){ ssn.type = 'password'; } else{ detectChanges(); secondHalf = ssn.value.substring(5); ssn.type = 'text'; ssn.value = "•••••"; ssn.value += secondHalf; fullSSN = ssnFirstFive + secondHalf; } } function detectChanges() { for (var i = 0; i < 5; i++){ if (ssn.value[i] != "•"){ ssnFirstFive = ssnFirstFive.substring(0, i) + ssn.value[i] + ssnFirstFive.substring(i+1); } } } </script> 

Essentially, every time an input changes, it checks to see if it matches the first 5, and if it doesn't, it will update the necessary characters.

Answer 2

You can use 3 different fields and enter password fields.

Add a focus handler that changes their type to text and a blur handler that changes them back to password.

You can combine them before sending or on the server.

 #ssn1{width:25px;} #ssn2{width:20px;} #ssn3{width:35px;} 

 <input type="password" name="ssn" maxlength=3 id="ssn1" /> <input type="password" name="ssn" maxlength=2 id="ssn2"/> <input type="password" name="ssn" maxlength=4 id="ssn3"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $('[name="ssn"]').focus(function() { $(this).attr("type", "text") }); $('[name="ssn"]').blur(function() { $(this).attr("type", "password") }); </script> 

You can also write a skip handler for the entire full SSN that will be inserted in the first field, and all three fields will be set.

This is the closest that you go if you are not working with one full text field and do not give the user the ability to mask and expose the field.

In production applications, this is actually the approach I take:

Disguise:

Exposed:

You can implement your own focus / blur functions to automatically mask / mask the field as needed.