Как сделать так, чтобы ввод HTML отображался как звездочка, как ввод пароля, за исключением последних 4 цифр?

У меня есть форма, которая позволяет пользователю вводить номер социального страхования. Я хочу, чтобы ввод HTML скрывал первые 5 цифр, отображая только последние 4 цифры.

Например, если пользователь вводит 123-45-6789, то ввод будет показывать ***-**-6789. Я использую плагин Inputmask, чтобы замаскировать ввод и заставить пользователя вводить цифры в наборе формат. Однако я озадачен тем, как показать первые 5 цифр в виде звездочки, а остальные сделать видимыми.

Вот маска, которую я сейчас использую

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

Вот как я активирую этот вход

(function () {

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

Как сделать так, чтобы ввод отображался как пароль звездочки, кроме последних 4 цифр? Если это невозможно с помощью этого плагина, как я могу сделать это без этого плагина или с помощью других плагинов?


jquery masking input-mask maskedinput jquery-inputmask
person Jay    schedule 29.09.2020    source источник
comment
Если я пока набрал только 8 цифр, должен ли он отображать ****5678 или *****678?   -  person John Wu    schedule 29.09.2020
comment
@JohnWu Для маски требуется 9 цифр. Если вы наберете 8 цифр и продолжите печатать, маска покажет ***-**-678   -  person Jay    schedule 29.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Ближе всего я мог получить код ниже:

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

person Tariqul Islam    schedule 29.09.2020
comment
Каким-либо образом это можно сделать в плагине Inputmask, чтобы я мог создать маску вместе со скрытой звездочкой? - person Jay; 29.09.2020
comment
Боюсь, я не могу помочь с этим. Никогда не пользовался этим плагином. - person Tariqul Islam; 29.09.2020