How to make an HTML input show as asterisk "like a password input" except for the last 4 digits?

Question

I have a form that allows a user to type in a social security number. I want the HTML input to hide the first 5 digits while only showing the last 4 digits.

For example, if the user types 123-45-6789, then the input will show ***-**-6789. I am using the Inputmask Plugin to mask the input and force the user to type in the digits in the set format. However, I am puzzled with how to show the first 5 digits as asterisk while making the rest visible.

Here is the mask I am currently using

<input type="text" class="masked-input" data-inputmask="'mask': '999-99-9999'" value="" />

Here is how I activate that input

(function () {

    Inputmask().mask(document.querySelectorAll(".masked-input"));
});

How to make input show as asterisk "password" except for the last 4 digits? If it is not possible using this plugin, how can I do it without this plugin or using other plugins?

Answer 1

Closest I could get is the code below:

$(document).ready(function(){
  var new_value = '';
      $('body').on('keyup', '#maskInput', function(event){
        var curr_value = $(this).val();
        if (event.which == 8) {
          if(curr_value.length<1){
            new_value = '';
          }else{
            var omitted = curr_value.slice(0, -1);
            $(this).val(omitted);
          }
        }else{
          var ch = curr_value.charAt(curr_value.length-1);
          if(curr_value.length<8){
            if(ch == '-'){
              new_value = new_value+'-';
            }else{
              new_value = new_value+'*';
            }
            $(this).val(new_value);
          }
        }
      })
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <form>
    <input type="text" id="maskInput">
  </form>