Почему маска ввода номера телефона JS не срабатывает на странице оформления заказа?

Question

[Kirill Shreer]

Приветствую,

Есть мака номера, работает на всех импутах кроме страницы оформления заказа.
Вопрос как это исправить, или куда смотреть?

Маска:

//phone mask
window.addEventListener("DOMContentLoaded", function() {
  [].forEach.call(document.querySelectorAll('.tel'), function(input) {
    var keyCode;
    function mask(event) {
      event.keyCode && (keyCode = event.keyCode);
      var pos = this.selectionStart;
      if (pos < 3) event.preventDefault();
      var matrix = "+7 (___) ___-__-__",
        i = 0,
        def = matrix.replace(/\D/g, ""),
        val = this.value.replace(/\D/g, ""),
        new_value = matrix.replace(/[_\d]/g, function(a) {
          return i < val.length ? val.charAt(i++) || def.charAt(i) : a
        });
      i = new_value.indexOf("_");
      if (i != -1) {
        i < 5 && (i = 3);
        new_value = new_value.slice(0, i)
      }
      var reg = matrix.substr(0, this.value.length).replace(/_+/g,
        function(a) {
          return "\\d{1," + a.length + "}"
        }).replace(/[+()]/g, "\\$&");
      reg = new RegExp("^" + reg + "$");
      if (!reg.test(this.value) || this.value.length < 5 || keyCode > 47 && keyCode < 58) this.value = new_value;
      if (event.type == "blur" && this.value.length < 5) this.value = ""
    }
    input.addEventListener("input", mask, false);
    input.addEventListener("focus", mask, false);
    input.addEventListener("blur", mask, false);
    input.addEventListener("keydown", mask, false)
  });
});

Answer 1

[alexalexes]

1.
window.addEventListener("DOMContentLoaded"...
Этот обработчик развешивает обработчик на маску после загрузки страницы. На формы, которые сформированы динамически после этого события - этот обработчик не захватит, на тех формах input-ы будут без масок.
Для этого нужно из анонимной функции этого обработчика нужно сделать нормальный именованный метод, и использовать этот метод, как в событии DOMContentLoaded, так и в других событиях, когда дорисовываются динамически еще какие-то дополнительные формы.
2.
... document.querySelectorAll('.tel')...
На input-е должен быть класс tel, вышеупомянутый обработчик пробегает только по таких элементам.

3. На input-элементе можно проверить, висит ли нужный обработчик событий. Нажмите F12, перейдите во вкладку Элементы, активируйте опцию "Выбрать элемент для проверки", чтобы мышкой можно было указать на экране исследуемый элемент. Перейдите в подвкладку "Прослушиватели событий", и посмотрите, есть ли такие обработчики:

input.addEventListener("input", mask, false);
    input.addEventListener("focus", mask, false);
    input.addEventListener("blur", mask, false);
    input.addEventListener("keydown", mask, false)

Если есть, то посмотрите, на какой участок кода они ведут. Если нет, то проблема по пункту 1 или 2.