Partial Password Masking on Input Field

Question

So I need to mask a SSN# input field, lets say the ssn is 123-45-6789, I need to display ***-**-6789 (real time as they enter each digit) but I sti

Answer 1

You can use 3 different fields and make then password fields.

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

You can combine them before submission or on the server.

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

You can also write a pass handler to all a full SSN to be pasted in the first field and have all three fields get set.

This is the closest you are going unless you work with a single full text box and give the user the ability to mask and unmask the field.

In production apps, this actually the approach I take:

Masked:

Unmasked:

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