除了最后 4 位数字外，如何使 HTML 输入显示为“像密码输入一样”的星号？

Question

我有一个允许用户输入社会安全号码的表单。我希望 HTML 输入隐藏前 5 位，而只显示后 4 位。

例如，如果用户键入123-45-6789，则输入将显示***-**-6789。我正在使用Inputmask Plugin 来屏蔽输入并强制用户以设置的格式输入数字。但是，我很困惑如何将前 5 位数字显示为星号，同时让其余数字可见。

这是我目前使用的面具

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

这是我激活该输入的方法

(function () {

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

如何使输入显示为星号“密码”，除了最后 4 位数字？如果无法使用这个插件，如果没有这个插件或使用其他插件，我该怎么办？

Answer 1

我能得到的最接近的是下面的代码：

$(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>