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

我有一个允许用户输入社会保险号的表格。我希望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位数字除外)?如果无法使用此插件,没有该插件或使用其他插件怎么办?

ulinker 回答:除了最后4位数字,如何使HTML输入显示为“像密码输入”一样的星号?

我能得到的最接近的代码如下:

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

本文链接:https://www.f2er.com/1481568.html

大家都在问