JS работает только с одним классом

Question

только начал изучать JS, есть такой код, но на сайте применяется только к одному классу

<div class="form__group field">
                                <input type="input" class="maskphone form__field" placeholder="Ваш номер" name="phone" id='phone' required />
                                <label for="name" class="form__label">Ваш номер:</label>
                             </div>

var elements = document.addEventListener("DOMContentLoaded", function() {
  var input = document.querySelector(".maskphone");

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

  function mask(event) {
    var blank = "+_ (___) ___-__-__";

    var i = 0;
    var val = this.value.replace(/\D/g, "").replace(/^8/, "7").replace(/^9/, "79");

    this.value = blank.replace(/./g, function(char) {
      if (/[_\d]/.test(char) && i < val.length) return val.charAt(i++);

      return i >= val.length ? "" : char;
    });

    if (event.type == "blur") {
      if (this.value.length == 2) this.value = "";
    } else {
      setCursorPosition(this, this.value.length);
    }
  };

  function setCursorPosition(elem, pos) {
    elem.focus();

    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
      return;
    }

    if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd("character", pos);
      range.moveStart("character", pos);
      range.select();
      return;
    }
  }
});

Answer 1

var input = document.querySelector(".maskphone");

querySelector выбирает только 1-й элемент. Используйте querySelectorAll, чтобы получить коллекцию элементов, и тогда навесить обработчик на каждый элемент коллекции.

БЛОГ НА HUSL

JS работает только с одним классом

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