0

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

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

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

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

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');

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

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

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

6
  • То есть инициализация перекрывает изменения в обработчике? 11 мая 2018 в 13:07
  • Появляется ошибка - TypeError: e.target.unmask is not a function Вывожу в консоль 'e' - именно тот элемент, который нужен. 11 мая 2018 в 13:16
  • Та же ошибка. TypeError: e.currentTarget.unmask is not a function 11 мая 2018 в 13:18
  • Вывел сейчас. Там находится обьект того инпута, что нужен. С этим проблем нет. 11 мая 2018 в 13:21
  • Значит проблема не в контексте. Ещё момент, вы точно уверены что методы срабатывают единожды, именно в момент инициализации, и единожды в момент выбора option?
    – test123
    11 мая 2018 в 13:26

1 ответ 1

0

В общем, решил проблему ручным вызовом события 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]);

}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.