Не удаляется inputmask

Question

Подскажите пожалуйста, не удаляется inputmask. В чем может быть проблема? В коде есть условие если код страны из массива равен значению input и нажимается клавиша с кодом 8, тогда от input плагин imputmask удаляется. Сейчас это не происходит, потому что разные значения кода страны и значения input в скрипте. В самом input видно что значения одинаковые.

$(document).ready(function() {
  $("#phone").inputmask("+380 (99) 999-99-99");
})
var phones = [{
    "country": "UA",
    "code": "+380",
    "mask": "(99) 999-99-99"
  },
  {
    "country": "RU",
    "code": "+7",
    "mask": "(999) 999-99-99"
  },
  {
    "country": "MD",
    "code": "+373",
    "mask": "(99) 999-99-99"
  }
];
var find_phone = 0;
$("#phone").keydown(function(event) {
  var val = $(this).val();
  val = val.replace(/[^+\d]/g, '');

  var phone_arr = phones.find(phones => val.includes(phones.code));
  if (phone_arr != null && find_phone == 0) {
    find_phone = 1;
    $(this).inputmask(phone_arr.code + " " + phone_arr.mask);
  }
  if (phone_arr != null) {
    console.log(phone_arr.code);
    console.log(val);
  }
  else {}
  if (phone_arr != null && phone_arr.code == val && event.which == 8) {

    find_phone = 0;
    $(this).inputmask('remove');
    $(this).val("");

  } else {}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script>

<input type="text" id="phone" value="+380123456789">

Answer 1

Как я понял это bug плагина. Прекрасное решение использовать intl-tel-input.

Вот и сам пример.

var telInput = $("#phone"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");

// initialise plugin
telInput.intlTelInput({
utilsScript:"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.4/js/utils.js"
});

var reset = function() {
  telInput.removeClass("error");
  errorMsg.addClass("hide");
  validMsg.addClass("hide");
};

// on blur: validate
telInput.blur(function() {
  reset();
  if ($.trim(telInput.val())) {
    if (telInput.intlTelInput("isValidNumber")) {
      validMsg.removeClass("hide");
      /* get code here*/
      var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;
      alert(getCode);
    } else {
      telInput.addClass("error");
      errorMsg.removeClass("hide");
    }
  }
});

// on keyup / change flag: reset
telInput.on("keyup change", reset);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js"></script>
<style>
 .hide {
    display: none;
 }
</style>
</head>
<body>
<input id="phone" type="tel">
<span id="valid-msg" class="hide">? Valid</span>
<span id="error-msg" class="hide">Invalid number</span>
</body>
</html>

БЛОГ НА HUSL

Не удаляется inputmask

Ответы (1 шт):