0

Есть скрипт, который считает количество символов в input. Если добавить поле, то скрипт работает некорректно. В чем может быть причина?

function inputSymbolCounter() {
  var elem = document.querySelectorAll(".symbol-input__counter");
  for (var i = 0; elem.length > i; i++) {
    var maxValueInputInit = elem[i].querySelector(".features-elem__symbols-number").textContent;
    var maxValueInit = parseFloat(maxValueInputInit);
    elem[i].querySelector(".symbol-counter__input").setAttribute("maxlength", maxValueInit);
    elem[i].querySelector(".symbol-counter__input").oninput = function(e) {
      var maxValueInput = elem[i].querySelector(".features-elem__symbols-number").textContent;
      var maxValue = parseFloat(maxValueInput);
      if (e.target.value.length > maxValueInit) {
        return false;
      } else {
        elem[i].querySelector(".features-elem__symbols-number").innerHTML = maxValueInit - e.target.value.length;
      }
    };
  }
}
inputSymbolCounter();
.features-elem__field {
  position: relative;
  height: 35px;
}

.features-elem__field-textarea {
  position: relative;
  height: 70px;
}

.features-elem__input {
  width: 100%;
  position: absolute;
  left: 0;
  height: 35px !important;
  padding-right: 125px;
  padding-left: 10px;
  border-radius: 5px !important;
}

.features-elem__input:active,
.features-elem__input:focus {
  border: 1px solid #5ed1b5;
}

.features-elem__symbols {
  font-size: 10px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translatey(-50%);
  z-index: 1;
  color: #5ed1b5;
}
<div class="features-elem__field symbol-input__counter">
  <input type="text" class="features-elem__input symbol-counter__input" maxlength>
  <div class="features-elem__symbols">
    <span class="features-elem__symbols-arrow">&#60;</span>
    <span class="features-elem__symbols-number">15</span>
    <span class="features-elem__symbols-text">sym</span>
  </div>
</div>

<div class="features-elem__field symbol-input__counter">
  <input type="text" class="features-elem__input symbol-counter__input" maxlength>
  <div class="features-elem__symbols">
    <span class="features-elem__symbols-arrow">&#60;</span>
    <span class="features-elem__symbols-number">35</span>
    <span class="features-elem__symbols-text">sym</span>
  </div>
</div>

0

1 ответ 1

2

Ошибка происходит из-за некорректного обращения с var и замыканиями. Из-за того что var хойстится (hoisting) на верх до определения функции, переменная i после окончания цикла становится равной elem.length, соответственно elem[i] указывает на несуществующий индекс. Обработчик события oninput срабатывает только после завершения цикла, значение переменной i берется через ссылку на область видимости (через замыкание) родительской функции, в i у него будет равно elem.length.

Пара замечаний:

  1. Для предотвращения действия по умолчанию лучше вызывать preventDefault. return false работает только если обработчик добавляется через "on<событие>", что может вызвать ошибки если в будущем изменится способ привязки события.
  2. Кроме того постоянно вызывать querySelector для получения одних и тех же узлов крайне нежелательно, т.к. обход DOM дерева довольно дорогая операция. Лучше один раз выбрать узел и сохранить его в локальную переменную. Это также улучшит читаемость кода.

Решение: Проблему с замыканием можно решить одним из перечисленных способов:

  1. Запоминать значение переменной при помощи создания дополнительного замыкания

    for (var i = 0; elem.length > i; i++) {
       var maxValueNode = elem[i].querySelector(".features-elem__symbols-number")
       var maxValueInit = parseFloat(maxValueNode.textContent);
    
       var counterNode = elem[i].querySelector(".symbol-counter__input");
    
       counterNode.setAttribute("maxlength", maxValueInit);
       counterNode.oninput = (function(maxValueNode, maxValueInit){ return function(e) {
         //Создаём отдельное замыкание на каждую итерацию, 
         //для сохранения значений maxValueInit и maxValueNode.
         if (e.target.value.length > maxValueInit) {
           e.preventDefault();
    
         } else {
           maxValueNode.innerHTML = maxValueInit - e.target.value.length;
    
         }
       }})(maxValueNode, maxValueInit);
     }
    
  2. Прибиндить (сделать bind с доп. параметрами) oninput значения i или интересующих вас узлов.

function inputSymbolCounter() {
   
   var elem = document.querySelectorAll(".symbol-input__counter");
   for (var i = 0; elem.length > i; i++) {
  var maxValueNode = elem[i].querySelector(".features-elem__symbols-number")
  var maxValueInit = parseFloat(maxValueNode.textContent);

  var counterNode = elem[i].querySelector(".symbol-counter__input");

  counterNode.setAttribute("maxlength", maxValueInit);
  
  counterNode.oninput = function(maxValueNode, maxValueInit, e) { 
  // Бинд сохранит для нас значения переданных переменных
  // и передаст их в качестве первых агрументов функции при её вызове.
      if (e.target.value.length > maxValueInit) {
         e.preventDefault();

      } else {
         maxValueNode.innerHTML = maxValueInit - e.target.value.length;
      }
  }.bind(this, maxValueNode, maxValueInit); 
   }
}
inputSymbolCounter()
.features-elem__field {
  position: relative;
  height: 35px;
}

.features-elem__field-textarea {
  position: relative;
  height: 70px;
}

.features-elem__input {
  width: 100%;
  position: absolute;
  left: 0;
  height: 35px !important;
  padding-right: 125px;
  padding-left: 10px;
  border-radius: 5px !important;
}

.features-elem__input:active,
.features-elem__input:focus {
  border: 1px solid #5ed1b5;
}

.features-elem__symbols {
  font-size: 10px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translatey(-50%);
  z-index: 1;
  color: #5ed1b5;
}
<div class="features-elem__field symbol-input__counter">
  <input type="text" class="features-elem__input symbol-counter__input" maxlength>
  <div class="features-elem__symbols">
    <span class="features-elem__symbols-arrow">&#60;</span>
    <span class="features-elem__symbols-number">15</span>
    <span class="features-elem__symbols-text">sym</span>
  </div>
</div>

<div class="features-elem__field symbol-input__counter">
  <input type="text" class="features-elem__input symbol-counter__input" maxlength>
  <div class="features-elem__symbols">
    <span class="features-elem__symbols-arrow">&#60;</span>
    <span class="features-elem__symbols-number">35</span>
    <span class="features-elem__symbols-text">sym</span>
  </div>
</div>

  1. Заменить запомнить значения elem[i] в переменной с let или const и использовать их внутри oninput. let и const создаются в области видимости цикла, поэтому каждый обработчик в цикле будет импть со

    function inputSymbolCounter() {
      const elem = document.querySelectorAll(".symbol-input__counter");
      for (let i = 0; elem.length > i; i++) {
        // Переменные объявленные через const или let не хойстятся.
        // Они создаются на каждой итерации заново. 
        // Благодаря этому обработчики получают значения которые были на сомент их создания
        const maxValueNode = elem[i].querySelector(".features-elem__symbols-number")
        const maxValueInit = parseFloat(maxValueNode.textContent);
    
        const counterNode = elem[i].querySelector(".symbol-counter__input");
    
        counterNode.setAttribute("maxlength", maxValueInit);
        counterNode.oninput = function(e) {
          if (e.target.value.length > maxValueInit) {
            e.preventDefault();
    
          } else {
            maxValueNode.innerHTML = maxValueInit - e.target.value.length;
    
          }
        };
      }
    }
    inputSymbolCounter();
    
4
  • можно пожалуйста показать как без es6 сделать
    – dmitriy
    23 окт 2017 в 12:14
  • у меня старый проэкт, где es6 не потдерживаеться
    – dmitriy
    23 окт 2017 в 12:16
  • Решения расположены по возрастанию требованиям к браузеру. Первый вариант должен работать даже на es3. Второе требует поддержки es5 (для bind, но его можно эмулировать на es3). Только третий вариант требует es6.
    – Arnial
    23 окт 2017 в 12:36
  • всё я понял спс, я не сразу понял что вы несколько версий написали
    – dmitriy
    23 окт 2017 в 12:38

Ваш ответ

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

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