Подмена маски номера телефона в зависимости от вводимой цифры

112

19 мая 2021, 16:50

Всем привет. Вообщем задачка нужно сделать маску как на https://www.tinkoff.ru/login/ Код ниже работает, но немного не так как хотелось. Если юзер изначально написал нету цифру, что хотел, то если он сотрёт содержимое input-а ,применённая ранее маска останется, а должна сброситься.

Был бы очень признателен, если кто подскажет решение.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <form action="">
            <input type="text" class="phone">
        </form>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="js/jquery.maskedinput.min.js">
        </script>
        <script>
    $(document).ready(function() {
           $( ".phone" ).one('keydown', function(event) {
            if (event.key==8) {
              $(this).mask("+9 (999)-999-99-99")
            }  
            else if(event.key==7) {  
                $(this).mask("+9 (999)-999-99-99")
            }
            else if(event.key==9) { 
                $(this).mask("+7 (999)-999-99-99")
            }
            else if(event.key==4) {  
                $(this).mask("+7 (999)-999-99-99")
            }
            else if(event.key==3) {  
                $(this).mask("+7 (999)-999-99-99")
            }
        });
    });
        </script>
    </body>
    </html>

Answer 1

Пробуйте так. keydown заменил на keyup, чтобы после нажатия проверить размер введенного в input.

$(document).ready(function() {
  var keys = {
    3: "+7 (999)-999-99-99",
    4: "+7 (999)-999-99-99",
    7: "+9 (999)-999-99-99",
    8: "+9 (999)-999-99-99",
    9: "+7 (999)-999-99-99",
  } // Всё сохранил в одном объекте, чтобы не добавлять кучу if.
  var one = true;
  $(".phone").on('keyup', function(e) {
    var key = keys[e.key]; 
    // Пример, e.key будет 3, тогда из keys достается строка с этим ключем: "+7 (999)-999-99-99"
    if (one) { 
      $(this).mask(key || ""); // Если такого ключа не будет, запишется пустая "" строка.
      one = false; // Во второй раз уже не сработает.
    } else if (this.value.length === 0) { // Если введено оказалось ничего
      one = true; // условная переменная опять станет true, и при следующем вводе маска сработает
      $(this).mask("");
    }
  });
});

Answer 2

Спасибо большое за ответ! но что-то всё равно не работает(

Немного переделал код , вот рабочий вариант может кому понадобится Единственное на мобиле не работает я так понял кей код другой у клавиши

<script>
$(document).ready(function() {
  var keys = {
    3: "+7 (999)-999-99-99",
    4: "+7 (999)-999-99-99",
    7: "+9 (999)-999-99-99",
    8: "9 (999)-999-99-99",
    9: "+7 (999)-999-99-99",
  } 
  var one = true;
  $("#phone").on('keydown', function(e) {
     let key = keys[e.key]; 
    if (one) { 
      $(this).mask(key || ""); 
      one = false; 
    } 
    if(e.keyCode==8){
    $(this).unmask();
    $(this).val("");
    one=true;
    } 
  });
});
</script>