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;}

<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 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.

Answer 2

Achieve this using html data attributes.

i have used the same html tag and store actual value in html tag attribute (data-value) to use later on and store value to display in html tag attribute value.

Function to partial mask input value

function mask_field_value(obj, mask_letters_count=7){
  mask_value =  $(this).data('mask-value') || '';
  unmask_value = $(this).data('unmask-value') || '';
  if (obj.value.length <= mask_letters_count){
        obj.type = 'password';
        mask_value = obj.value;
        $(this).data('mask-value', obj.value);
    } else {
        obj.type = 'text';
        unmask_value = obj.value.substring(mask_letters_count);
        obj.value = "*".repeat(mask_letters_count) + unmask_value;
        $(this).data('unmask-value', unmask_value);
    }
    $(this).data('value', mask_value + unmask_value);
    console.log($(this).data('value'));
}

Add an event on input fields to mask

$(document).ready(function () {
    $(document).on('keyup', '.mask_input_display', function () {
         mask_field_value(this);
    });
});

Answer 3

This might be a little sloppy, but it works as you want it to, is all in one text field, returns the full accurate SSN (despite replacing first 5 values with bullet points), and allows for 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 the input is changed, it checks to see if it matches the first 5 from before, and if it doesn't, it will update the necessary characters.