Приоритет операций JQuery/JS

202

14 мая 2018, 02:10

Никак не могу понять в чем дело. Есть 2 текстовых поля в шаблоне

<input type="text" id="first">
<input type="text" id="second">

Предназначены они для телефонов. Нужно сделать маску и возможность выбора кода. Для этого использую JQuery и 2 плагина к нему:

intl-tel-input (https://github.com/jackocnr/intl-tel-input)
jQuery-Mask-Plugin (https://github.com/igorescobar/jQuery-Mask-Plugin)

Написал код инициализации этих двух полей.

function initPhoneMask(fieldId) {
    // инициализируем поле для телефона
    // https://github.com/jackocnr/intl-tel-input
    $(fieldId).intlTelInput({
      autoHideDialCode: false,
      nationalMode: false,
      preferredCountries: ['ru'],
      utilsScript: "utils.js"
    });
    // обработчик при изменении телефонного кода
    $(fieldId).on("countrychange", function(e, countryData) {
      if (countryData.iso2 === "ru") {
          $(this).mask('+7 (000) 000-00-00');
      } else {
          $(this).unmask();
      }
    });
    // инициализируем маску для телефона
    // https://github.com/igorescobar/jQuery-Mask-Plugin

    $(fieldId).mask('+7 (000) 000-00-00');
}
$(document).ready(function() {
    initPhoneMask("#first");
    initPhoneMask("#second");
});

То есть строка

$(fieldId).mask('+7 (000) 000-00-00');

инициализирует поле изначально нужной маской, а обработчик вешает/убирает маску если выбран/не выбран код нужной страны.

НО. При изменении кода страны, на любую другую маска не пропадает. Если убрать код инициализации, то все работает, но вначале поле не инициализируется маской.

Почему так? Мб кто-то сталкивался?

Answer 1

В общем, решил проблему ручным вызовом события change. Инициализацию убрал.

function initPhoneMask(fieldId) {
    // инициализируем поле для телефона
    // https://github.com/jackocnr/intl-tel-input
    $(fieldId).intlTelInput({
      autoHideDialCode: false,
      nationalMode: false,
      preferredCountries: ['ru'],
      utilsScript: "utils.js"
    });

    // обработчик при изменении телефонного кода
    $(fieldId).on("countrychange", function(e, countryData) {
      if (countryData.iso2 === "ru") {
          $(this).mask('+7 (000) 000-00-00');
      } else {
          $(this).unmask();
      }
      $(fieldId).val('');
      $(fieldId).val('+' + countryData.dialCode);
    });

    var countryData = $(fieldId).intlTelInput('getSelectedCountryData');
    $(fieldId).trigger('countrychange', [countryData]);
}