Заменить указанный c текст на точки

Question

$("#txtField").keyup(function(){
    let data = $(this).val();
  //alert(data);
  let splitData = data.split("-");
  splitData[1] = "****";
  splitData[3] = "*******";
  if($(this).val().length == 19 && $(this).val().indexOf("-") > 0)
    $(this).val(splitData.join("-"));
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<input type="text" id="txtField" maxlength="19">

Пример ввода

AB C -1234-11-1234567

У меня в качестве примера приведен приведенный выше код. Но проблема в том, что я все еще могу видеть 1234 после ввода текста в текстовое поле. Я хочу добиться того, чтобы при вводе 1234 он автоматически превратился в точку (like the type="password").

Примечание

Пример текста выше может изменить, но формат исправить. Он имеет три (3) тире (-)

Ожидаемый результат

BLG - **** - 11- ***** *

Answer 1

Вы можете попробовать другую версию, используя RegExp:

//$('#txtField').on('keyup', function(){ // works
$('#txtField').on('input', function(){   // better
  let s = this.value;
  if (
    /^(.{3}\-.{4}\-.{2}\-)(.{1,7})$/.test(s) ||
    /^(.{3}\-)(.{1,4})$/.test(s)
  ) {
    this.value = RegExp.$1 + RegExp.$2.replace( /./g, '*' );
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<input type="text" id="txtField" maxlength="19">

И я полностью согласен с @ User863 - использование события input лучше.

Answer 2

Мое предложение - не использовать метод input, потому что он новый и не поддерживается во всех браузерах ссылка , это в основном то же самое, что и ответ пользователя @ User863, здесь я использовал событие keyup, это бит показывает символ при вводе в текстовое поле, а затем после того, как он будет преобразован в *.

$("#txtField").on('keyup', function() {
    let data = $(this).val();
    let splitData = data.split("-");
    if (splitData[1])
        splitData[1] = splitData[1].replace(/./g, '*');
    if (splitData[3])
        splitData[3] = splitData[3].replace(/./g, '*');
    $(this).val(splitData.join("-"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<input type="text" id="txtField" maxlength="19">

Answer 3

Использование события input.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event https://caniuse.com/#search = ввод% 20event

$("#txtField").on('input', function() {
  let data = $(this).val();
  let splitData = data.split("-");
  if (splitData[1])
    splitData[1] = splitData[1].replace(/./g, '*');
  if (splitData[3])
    splitData[3] = splitData[3].replace(/./g, '*');
  $(this).val(splitData.join("-"));
});

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

<input type="text" id="txtField" maxlength="19">

Answer 4

Вы можете сделать это так, используя регулярные выражения:

$("#txtField").keyup(function() {
  let data = $(this).val();
  dots = data.replace(/\d+/g, "*");
  $(this).val(dots);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtField"/>