Here's how I did it. There are probably better ways to do this, but this one worked for me.
This is tested in Forms 11 Update 2 Classic Designer.
Add two single-line fields to your form.
Give the first one a variable name like unmasked_ssn, make it required, set a character limit of 9, and a regular expression of \d{9}
Give the second one a variable name like masked_ssn, and then you can leave all the other settings the same.
Now, check the q numbers for the two fields, if they are q1 and q2, then the following Javascript should work without any edits. If they are different numbers, you'll need to edit all the references throughout the code:
$(document).ready(function () {
//Load the font-awesome functionality for the "eye" icon.
$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');
var eyeVisible = false;
//Field1 in this example is the unmasked SSN.
//On the layout page, that field should be marked as Required,
//with Character Limit of 9 and Regular Expression of: \d{9}
//
//Field2 in this example is the masked SSN.
//On the layout page it should just be the single line default settings.
//
//If the fields are not q1 and q2, then every reference to Field1, Field2,
//FieldLabel1, and FieldLabel2 will need to be updated.
//Rearrange the two fields so that they are both combined and the
//unmasked one is invisible.
//This will allow errors/warnings on the hidden field to appear
//beneath the visible field.
$('#FieldLabel2').after($('#FieldLabel1'));
$('#FieldLabel2').hide();
$('#Field2').after($('#Field1'));
$('#Field1').css('opacity', '0');
//Add the "eye" icon onto the SSN field.
$('#Field2').after('<i class="fa fa-eye" aria-hidden="true"></i>');
$('.fa').css('position', 'absolute').css('padding', '5px');
if($('#Field2').hasClass('cf-small')) {
$('.fa').css('left', '21%');
}
else if($('#Field2').hasClass('cf-medium')) {
$('.fa').css('left', '46%');
}
else if($('#Field2').hasClass('cf-large')) {
$('.fa').css('left', '71%');
}
else if($('#Field2').hasClass('cf-xlarge')) {
$('.fa').css('left', '88%');
}
//Turn the visibility off and on via the eye icon.
$('.fa-eye').on('mousedown', function() {
eyeVisible = true;
$('#Field1').trigger('input');
});
$('.fa-eye').on('mouseup', function() {
eyeVisible = false;
$('#Field1').trigger('input');
});
//When user selected the masked SSN field, automatically move the
//focus into the unmasked field.
$('#Field2').focus(function(){
$('#Field1').focus();
});
//Ensure only numbers can be entered into the SSN field.
$('#Field1').keypress(function(key) {
if(key.charCode < 48 || key.charCode > 57) return false;
});
//Based on the length of the unmasked SSN field, update
//the text in the masked SSN field.
$('#Field1').on('input', function() {
if(eyeVisible) {
$('#Field2').val($('#Field1').val());
}
else {
if($(this).val().length == 0) {
$('#Field2').val('');
}
else if($(this).val().length == 1) {
$('#Field2').val('x');
}
else if($(this).val().length == 2) {
$('#Field2').val('xx');
}
else if($(this).val().length == 3) {
$('#Field2').val('xxx-');
}
else if($(this).val().length == 4) {
$('#Field2').val('xxx-x');
}
else if($(this).val().length == 5) {
$('#Field2').val('xxx-xx-');
}
else if($(this).val().length == 6) {
$('#Field2').val('xxx-xx-x');
}
else if($(this).val().length == 7) {
$('#Field2').val('xxx-xx-xx');
}
else if($(this).val().length == 8) {
$('#Field2').val('xxx-xx-xxx');
}
else if($(this).val().length == 9) {
$('#Field2').val('xxx-xx-xxxx');
}
}
});
});
The end result should look something like this:
When holding the mouse down on the "eye" icon:
Also, I don't have this in a live form currently, because the person who originally requested I do this decided they wanted me to do something different, so I never got beyond testing it. Therefore, I never bothered to load the font-awesome files into the Forms server and call them from there, so that first bit about loading them from an website is just a placeholder until you have the files on your server and can load them from there instead, which would be a better solution.