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

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